如何在一段时间内忽略 jQuery 动画？答案

【问题标题】：How can I ignore a jQuery animation for some time?如何在一段时间内忽略 jQuery 动画？
【发布时间】：2011-07-26 10:29:03
【问题描述】：

示例：

http://jsfiddle.net/patrioticcow/XnnvD/4/

这是使用延迟将动画延迟一点，但是当用户将鼠标悬停在黑色图像上几次时会出现问题，动画会记住继续。

这是一个有趣的效果，但不是我想要的。如果用户将鼠标悬停几次，我希望动画不会出现，比如说在一秒钟左右。

【问题讨论】：

标签： jquery animation

【解决方案1】：

研究使用jQuery的stop()函数。

它可以帮助防止动画“排队”。这似乎是问题所在。

stop的第一个参数是清空队列。

$("#someDiv").hover(function(){
    $(this).stop(true, false).up);
}, function() {
    $(this).stop(true, false).down);
});

更多示例在 Full Cycle of Animation on Hover/Off。

【讨论】：

【解决方案2】：

您应该在动画前使用.stop() 以防止动画队列堆积。

prevent-animation-queue-buildup

      $(document).ready(function() {
          $('ul.anim_queue_example1 a')
              .hover(function() {
                  $(this).animate({ left: 20 }, 'fast');
              }, function() {
                  $(this).animate({ left: 0 }, 'fast');
              });
      });

这里是更新的 JavaScript，它使用 .stop() 方法修复了动画队列的堆积。

  $(document).ready(function() {
      $('ul.anim_queue_example2 a')
          .hover(function() {
              $(this).stop().animate({ left: 20 }, 'fast');
          }, function() {
              $(this).stop().animate({ left: 0 }, 'fast');
          });
  });

【讨论】：

【解决方案3】：

如果您的意图是延迟动画直到鼠标的速度暗示有悬停意图，请查看jQuery HoverIntent plugin。当且仅当鼠标在项目上减速到足以暗示悬停时，此插件可用于触发悬停回调。可以通过包含它并将.hover() 调用替换为.hoverIntent() 调用来使用它。

【讨论】：