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;
}

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