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

Question

我正在尝试在jQuery中建立一个非常基本的悬停动画。 将鼠标悬停在div上，然后将主要内容向下滑动，将鼠标向上滑动，然后向上滑动。

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

这段代码可以正常工作，但是显而易见的问题是，如果您真正快速地将鼠标移入和移出，动画会排队。

为了缓解这个我已经阅读了.stop(true)放置在之前功能.slideToggle()停止以前的动画和清除动画队列。 所以我尝试了这段代码：

<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中的错误，并提出了错误票证： 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个，一个在打开时，另一个在关闭时。 在第一个条件下，我们防止停留下来。