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

Question

我有一个小 jquery

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

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

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

我不相信这是 jquery 足够强大。有时，如果鼠标快速移动越过父 li，下拉菜单不会隐藏。

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

谢谢

Answer 1

正如 xFortyFourx 提到的，您可以使用.stop()方法来清除队列。正如 jQuery文档所说，stop 方法只适用于动画，所以你最好使用.animate()而不是.fadeIn()and.fadeOut()

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

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

Answer 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();
  }
});

祝你好运