Radrigo

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                $('.mbn__shor').each(function () {
                        let el = $(this).parent().find('.mbn__shor');
                        $(el).slideUp('fast');
                });

                $('.ms-box a').hover(
                        function () {
                                $(this).parent().find('.mbn__shor').slideDown();
                        }, function () {
                                let el = $(this).parent().find('.mbn__shor');
                                $(el).slideUp();
                        }
                );
        }
});

Спасибо большое всем за помощь.

Получилось вот так. Всё вроде работает нормально. Поправьте, если считаете, что что-то не так.

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                $('.mbn__shor').each(function () {
                        let el = $(this).parent().find('.mbn__shor');
                        $(el).css('margin-bottom', '-' + $(el).innerHeight() + 'px');
                });

                $('.ms-box a').hover(
                        function () {
                                $(this).parent().find('.mbn__shor').css('margin-bottom', '0');
                        }, function () {
                                let el = $(this).parent().find('.mbn__shor');
                                $(el).css('margin-bottom', '-' + $(el).innerHeight() + 'px');
                        }
                );
        }
});

Тут я с вами не соглашусь. display нет позволит скрыть блок плавно. К блоку для плавной смены margin я могу применить transition.
Блок с position:absolute не влияет на другие объекты вокруг себя, а мне же надо, чтобы он выталкивал блок, который находится выше. Примеры в видео, который я разместил выше.
Можно было использовать height, но большой разницы я не вижу.
Методы show/hide/toggle пока не знаю как использовать. Попробую изучить

Спасибо большое, но данный код не скрывает блоки при первоначальной загрузке страницы. Скрываются только после наведения курсора мыши. И что не так с marginBottom? Вроде хорошо работает. Считаете как-то по-другому было бы лучше?

Спасибо большое.

Что-то не срабатывает ваш код

Имеются примерно таких три блока с классами ms-box-1, ms-box-2 и ms-box-3.

                        <section class="ms-box-1"><a href="/">
                                        <div class="mbn">
                                                <h3>White Keep Assault</h3>
                                                <div class="mbn__shor">Maecenas tempus, tellus eget condimentum rhoncus, sem quam...</div>
                                        </div>
                                </a></section>

Надо чтобы блог с классом mbn__shor был скрыт при загрузке и появлялся при наведении мышки на ссылку. Примерно так.

$(document).ready(function () {
                var num = 0;
                var mbnHeight = [];
                var square = [];
                var numBox;

                for (num; num < 3; num++) {
                        numBox = num + 1;
                        // Узнаём высоту блока
                        mbnHeight[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor').offsetHeight;
                        // Смещаем  его вниз на эту величину
                        square[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor');
                        square[num].style.marginBottom = '-' + mbnHeight[num] + 'px';

                        $('.ms-box-' + numBox + ' a').hover(
                                function () {
                                        square[num].style.marginBottom = '0';
                                }, function () {
                                        square[num].style.marginBottom = '-' + mbnHeight[num] + 'px';
                                }
                        );
                }

});

Если бы знал как исправить, здесь не спрашивал бы.

При наведении мыши на блоке появляется куча подобных ошибок

Я новичок и только учусь. Таким образом решил сделать проверку по классу. Если он есть в наличии, тогда данный код будут выполняться. Это неправильно?

Не принципиально. Просто решил сделать так и оно работает.