Radrigo

vk.com
Рейтинг
86
Регистрация
01.12.2012
Фокус
Спасибо большое. Понял, почему не работало. Однако когда фокус переключается на ссылку в подменю, стиль почему-то не добавляется.
Фокус
webinfo #:

Так работает hover. А focus работает иначе, у него только одна функция-обработчик, а не две.

А можете подсказать, как реализовать добавление класса при фокусировке?
Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:

В текущем варианте анимации нет, я об этом упомянул выше.
А если надо - пожалуйста:.
.fadeOut()
.slideDown()
.hide()
.animate()

Спасибо большое за ещё одну подсказку. slideUp и slideUp позволяют плавно скрывать без CSS. Вот что получилось и прекрасно работает)
$(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();
                        }
                );
        }
});

Определение в JS высоты блока и сдвиг вниз на эту высоту

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

webinfo #:

Ну Вы же учитесь? Вот и доделайте. Вариантов несколько. Я же переписал только  тот кусок, который вызывал у Вас затруднения.

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

$(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');
                        }
                );
        }
});
webinfo #:

Не применяют обычно для этой цели margin. Применяют display, применяют position, применяют height/width, ещё что-то применяют, а margin - это экзотика какая-то.
И у вас же подключен jQuery, причём никакой анимации - для этого вообще существуют методы show/hide/toggle.

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

Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:
Я посмотрел, в чём там проблема. Скрипт пытается найти square[3], так как последнее вычисленное значение num равно 3. И естественно, не находит его, о чём и пишет в сообщении о ошибке.
Вообще, подобные задачи решаются иначе. Выбросьте нумерацию ms-box, и код будет таким:

Хотя  на самом деле, скрывать элементы через marginBottom - тоже то ещё извращение.

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

timo-71 #:

Там только направление. А в итоге - что то типо такого:

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

Определение в JS высоты блока и сдвиг вниз на эту высоту
timo-71 #:

$ на помойку. Попробуйте пойти по такому пути.

ф12, и посмотрите, что там чего. В итоге, все получится💪


А jQuery, да лучше на помойку..

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

Имеются примерно таких три блока с классами 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 был скрыт при загрузке и появлялся при наведении мышки на ссылку. Примерно так.


Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:

Используйте var при объявлении переменной, если пока не понимаете область видимости.

А вообще, все эти манипуляции с массивами непонятны, если Вы нигде больше не используете эти массивы. Проще оперировать обычными переменными.

К сожалению var не помогла. Такая же ошибка. Массивы используют для того, чтобы не создавать для каждого блока отдельные переменные. Например с высотой блоков: mbnHeight1, mbnHeight2 и т.п.. Не совсем понимаю, как это сделать без массивов в цикле
$(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';
                                }
                        );
                }

});
Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:

Ну так смотрите ошибки и исправляйте код.

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

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

"Uncaught TypeError: square[num] is undefined"
Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:

Что за винегрет? Вы не знаете селекторов jQuery?

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

Определение в JS высоты блока и сдвиг вниз на эту высоту
webinfo #:

Почему именно  margin-bottom?

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

123456 7
Всего: 67