Почему после открытия меню, оно дергается вверх вниз?

Question

[Сергей Волков]

Всем, привет.

При наведении на li у меня открывается меню


Но, если я опускаю курсор чуть ниже, то он начинает дергаться/


Ссылка на сайт: lunamag-articles.malevich-web.ru/kinderbuecher-zum...

Видео:
https://radikal.ru/video/sl7a41GgqaE

js:

$('.menuWrapper .menu > li').hover(
        // Открытие меню
        function() {
            $( this ).children('.menuDropdown').slideDown(); //Открывает меню
            console.log($( this ).children('.menuDropdown').is(':hover'));

            // Убирает подчеркивание
            if ($(this).hasClass('current-menu-item')) {
                $('.current-menu-item').addClass('disabled');

            }
            $(this).addClass("active");
            imgOrientation2();
        }, function() {
            // Закрытие меню
                $( this ).children('.menuDropdown').slideUp();
                $('.menu li').removeClass("active");
                $('.current-menu-item').removeClass('disabled');
                $( ".menuDropdown .articleListing .item .banner img" ).removeClass();
            },


    );

Answer 1

[Сергей Волков]

Короче, это происходит из за того, что мышка наводится и отпускается от меню, тем самым в очередь становятся новые анимации. Все, что нужно сделать, это добавить .stop(). Тогда анимация будет просто прирыватся.

Answer 2

[bqio]

Зачем Вам столько JS для такой простой задачи? Попробуйте использовать только HTML + CSS. Вот базовый пример, анимации сами подкрутите.

https://jsfiddle.net/m2twgn3f/

Comments

[Сергей Волков]

Надо именно через js