$ .slideToggle（）＆$ .hover（）动画队列问题

我想在jQuery中设置一个非常基本的悬停动画。将鼠标移到div上，主要内容向下滑动，向上滑动并向上滑动。

<script type="text/javascript"> 
    $(function() { 
     $('.listItem').hover(function() { 
      $(this).find('.errorData').slideToggle('slow'); 
     }); 
    });</script>

这段代码工作正常，但明显的问题是动画排队，如果你的鼠标进出真的很快。

为了缓解这个问题，我已经阅读之前放置的.stop(true)函数可以停止上一个动画并清除动画队列。所以我试过这段代码：

<script type="text/javascript"> 
    $(function() { 
     $('.listItem').hover(function() { 
      $(this).find('.errorData').stop(true).slideToggle('slow'); 
     }); 
    });</script>

我现在的问题是，这似乎只能在第一个mousein和mouseout上工作。之后，动画不再触发，也没有任何反应。这是Google Chrome DEV频道。

这似乎加快了鼠标移入和移出的速度。

我似乎无法解决问题是什么，这JSFiddle有一个工作（并打破我的电脑）的例子。

编辑：我怀疑这是jQuery的1.4.2中的错误，并提出一个bug票：http://dev.jquery.com/ticket/6772

来源

2010-07-05 Alastair Pitts

尝试

.stop(true,true)

，或者您可以使用此hoverIntent plugin

来源

2010-07-05 06:10:05 Reigel

这种有点作品。它解决了动画不再起作用的问题，但它现在来回跳动并闪烁，而不是流畅的动画。 – 2010-07-05 06:12:52

是的......确实如此。这是因为悬停的行为......好吧，你可以尝试这个插件...我在这样的时代使用它，http://cherne.net/brian/resources/jquery.hoverIntent.html – Reigel 2010-07-05 06:19:10

谢谢，我'我会给插件一个去。 – 2010-07-05 11:46:30

.stop(true, true)

像冠军一样工作：

$('.subpage-block').hover(function(){ 

     $('.subpage-block-heading span', this).stop(true,true).fadeToggle('fast'); 

      $('.subpage-block-content', this).stop(true,true).slideToggle(); 

    });

来源

2012-01-17 01:20:32

MayBe better？

$('.listitem').hover(function(){ 
    if (!$(this).find('.errorData').hasClass('down') && 
     !$(this).find('.errorData').hasClass('up')) { 
    $(this).find('.errorData').addClass('down').slideDown('fast', function() { 
     $(this).removeClass('down'); 
    }); 
    } 
}, function() { 
    if (!$(this).find('.errorData').hasClass('up')) { 
    $(this).find('.errorData').addClass('up').slideUp('fast', function() { 
     $(this).removeClass('up'); 
    }); 
    } 
});

这种方式队列最多2个，一个是起始时，另一个是关闭时。有了我们的第一个条件，我们可以保持下去。

来源

2012-01-18 20:50:01

这是如何改善，纠正或改变接受的答案？ – 2012-10-27 20:42:48

$ .slideToggle（）＆$ .hover（）动画队列问题

回答

相关问题