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 plugin

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

MayBe更好？

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

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

3 个答案: