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 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/

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

祝你好运

jquery悬停菜单fadein / hide下拉列表

2 个答案: