jquery悬停菜单淡入/隐藏下拉菜单答案

【问题标题】：jquery hover menu fadein/hide dropdownjquery悬停菜单淡入/隐藏下拉菜单
【发布时间】：2013-02-13 09:28:17
【问题描述】：

我有一个小 jquery

    $(".dropdown").hide();

$('#mainnav ul li').hover(function(e){
        $(this).children('.dropdown').fadeIn(250);
}, function(e) {
        $(this).children('.dropdown').hide();
});

当它的父 LI 悬停在其上时，它会淡入并隐藏每个下拉菜单。

我不相信这是 jquery 足够健壮。有时，如果鼠标快速移动到父 li 上，下拉菜单不会隐藏。

我能做些什么来提高这段代码的可靠性吗？

谢谢

【问题讨论】：

使用hoverintent
你可以试试：.stop().fadeIn(250); 和 .stop().hide()。 stop() 将清除所有动画队列并执行当前的。

标签： jquery drop-down-menu menu hover html-lists

【解决方案1】：

正如 xFortyFourx 提到的，您可以使用.stop() 方法来清除队列。正如 jQuery documentation 所说，stop 方法仅适用于动画，因此您最好使用 .animate() 而不是 .fadeIn() 和 .fadeOut()

$("#mainnav ul li").hover(
    function() {
         $(this).children('.dropdown').stop().animate({opacity: 1});
    },
    function() {
        $(this).children('.dropdown').stop().animate({opacity: 0});
    }
);

将.stop() 与.fadeIn() 一起使用会导致元素在半透明模式下冻结。在此处查看两种情况的实时预览：http://jsfiddle.net/stichoza/faqNt/

【讨论】：

【解决方案2】：

也许这段代码可以帮助你：

    $(".dropdown").hide();
    $('#mainnav ul li').hover(function(){
        $(this).children('.dropdown').stop().fadeIn(250);
     }, function() {
        $(this).children('.dropdown').stop().hide();
    });

或

$('#mainnav ul li').hover(function(){
  if($(this).children('.dropdown').css('display') == 'none'){
     $(this).children('.dropdown').fadeIn(250);
  } else {
     $(this).children('.dropdown').stop().hide();
  }
});

祝你好运

【讨论】：

stop() 不应该在孩子身上，因为那是动画