Question

示例：

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

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

这是一个有趣的效果，但不是我想要的。我希望动画不会发生，如果用户徘徊几次，让我们说一秒左右。

Answer 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 。

Answer 2

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

Answer 3

你应该在动画之前使用.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');
              });
      });

以下是使用.stop（）方法修复动画队列构建的更新JavaScript。

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

我怎么能忽略jQuery动画一段时间？

3 个答案: