jQuery的悬停菜单淡入/隐藏下拉

问题描述：

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

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

这淡入和隐藏每个菜单下拉时，它的父李悬停。

我不相信这是jquery足够强大。有时候，如果鼠标以高速移动到父节点上，下拉不会隐藏。

有什么我可以做的，以提高此代码的可靠性？

感谢

使用[hoverintent（http://cherne.net/brian/resources/jquery.hoverIntent.html） – mplungjan 2013-02-13 09:29:14

你可以尝试： '.stop（）淡入（ 250）;'和 '.stop（）。hide（）'。 'stop（）'将清除所有动画队列并执行当前动画。 – KBN 2013-02-13 09:31:16

答

也许这个代码可以帮助您：

$(".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(); 
    } 
});

好运

不应该停止（）在孩子上，因为这就是动画 – Pete 2013-02-13 10:08:58

答

为xFortyFourx提到的，你可以使用.stop()方法清除队列。在jQuery documentation说，停止方法仅适用于动画，所以你最好使用.stop()与.fadeIn()会导致在半透明模式冻结元素更好地利用.animate()代替.fadeIn()和.fadeOut()

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

。看到这两种情况下实时预览这里：http://jsfiddle.net/stichoza/faqNt/

jQuery的悬停菜单淡入/隐藏下拉

相关推荐