javascript - Jquery 动画菜单

Question

我为菜单背景制作了一个 jQuery 动画。菜单有一个下拉菜单，当您将鼠标悬停在菜单上时，动画开始播放，但下拉菜单开始变得不稳定。 jquery 的新手所以不确定为什么要这样做。

我添加了一个具有绝对位置的 div (menu-bg) 以在悬停在菜单内时更改高度。

这是我控制动画的 javascript:

 $('.navbar-nav >li > a').hover(
    function() {
        $(this).stop().next().animate({
            height: "60px"
        }, {
            easing: "swing",
            queue: true,
            duration: 400
        });
    },
    function() {
        $(this).stop().next().animate({
            height: "0px"
        }, {
            easing: "swing",
            queue: true,
            duration: 200
        });
    });

这是查看实际问题的站点链接，将鼠标悬停在主页上时您会注意到它。

http://bratworks.com/static

Answer 1

我发现您的代码中的以下更改已完成工作:

在 init.js 的第 15 行附近，从下拉菜单 fadeOut() 中删除了 200 毫秒的延迟。

$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();

我重新编写了您的悬停函数以针对 li 而不是 a，看起来那里存在某种冲突:

$('.navbar-nav > li').on({
 mouseenter: function() {;
    $(this).find('.menu-bg').animate({ height: "60px" });
  }, 
 mouseleave: function() {
    $(this).find('.menu-bg').animate({ height: "0px" });
   }
 });

最后，我覆盖了在 .dropdown-menu 上创建 5px 边距间隙的 CSS:

.dropdown-menu {
  margin-top:0px!important;
}

给你!如果您希望我扩展任何内容，请告诉我？