jQuery的懸停菜單淡入/隱藏下拉

我有一個小的jQueryjQuery的懸停菜單淡入/隱藏下拉

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

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

這淡入和隱藏每個菜單下拉時，它的父李懸停。

我不相信這是jquery足夠強大。有時候，如果鼠標以高速移動到父節點上，下拉不會隱藏。

有什麼我可以做的，以提高此代碼的可靠性？

感謝

來源

2013-02-13 onebitrocket

使用[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(); 
    } 
});

好運

來源

2013-02-13 09:51:02

不應該停止（）在孩子上，因爲這就是動畫 – 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/

來源

2013-02-13 11:15:26 Stichoza

jQuery的懸停菜單淡入/隱藏下拉

回答

相關問題