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

我正在尝试在jQuery中设置一个非常基本的hover动画。 鼠标hover在div上，主要内容向下滑动，鼠标向上滑动。

 $(function () { $('.listItem').hover(function () { $(this).find('.errorData').slideToggle('slow'); }); }); 

这段代码工作正常，但显而易见的问题是如果你快速地进出鼠标，动画排队。

为了缓解这种情况，我已经读到.stop(true)之前放置的.stop(true)函数会停止上一个动画并清除动画队列。 所以我尝试了这段代码：

  $(function () { $('.listItem').hover(function () { $(this).find('.errorData').stop(true).slideToggle('slow'); }); }); 

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

鼠标移入和移出的速度有多快，这似乎更加恶化。

我似乎无法弄清楚问题是什么，这个JSFiddle有一个工作（并打破我的计算机）的例子。

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

Answer 1

尝试

 .stop(true,true) 

---

或者你可以使用这个hoverIntent插件

Answer 2

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

Answer 3

可能更好？

 $('.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，一个是up，另一个是down。 在第一个条件下，我们可以防止停留。