如何在jQuery中停止动画，但是当动画首先完成时

Posted 2023-05-08

【中文标题】如何在jQuery中停止动画，但是当动画首先完成时

【英文标题】：How to stop animation in jQuery, but when animation is finished first

【发布时间】：2012-04-29 22:59:05

【问题描述】：

我需要有关自动滑块动画的帮助。所以，我的问题是 - 如何在悬停事件上停止动画，但不是立即停止，而是在单独元素上的动画完全完成时停止。

我有这段代码：

$(function()

   var current_slide=1;
   var set_time=2500;

   $('span').css(top:'300px');

   $.timer(6000,function(timer)
      switch(current_slide)
         case 1:
            $('span').css(top:'350px');
            $('#slideshow').stop().animate(left:'-960px',top:'0px',easing:'easeOutBack',duration:set_time);
            current_slide=2;
            $('span').delay(2500).animate(top:'300px');
            break;
         case 2:
            $('span').css(top:'350px');
            $('#slideshow').stop().animate(left:'-1920px',top:'0px',easing:'easeOutBack',duration:set_time);
            current_slide=3;
            $('span').delay(2500).animate(top:'300px');
            break;
         case 3:
            $('span').css(top:'350px');
            $('#slideshow').stop().animate(left:'-2880px',top:'0px',easing:'easeOutBack',duration:set_time);
            current_slide=4;
             $('span').delay(2500).animate(top:'300px');
            break;

         case 4:
            $('span').css(top:'350px');
            $('#slideshow').stop().animate(left:'0px',top:'0px',easing:'easeOutExpo',duration:set_time);
            current_slide=1;
            $('span').delay(2500).animate(top:'300px');
            break;
      

      timer.reset(12000);
   );

   $("#slideshow").hover(function()
      $(this).stop(true,true);
   );
);

问题是当我将鼠标悬停在滑块上时，动画几乎停止（跳到最后），突然而丑陋。可能我应该在.stop（）之前使用队列，或者类似的东西。 这是一个很好的例子：http://www.sevtopolishotel.com/ 提前Tnx！

【问题讨论】：

花费 15 秒并正确格式化该代码，一点缩进 + 行空格对可读性有很大帮助。

您的case 3 有一个不在下一个案例之前的休息时间。这是无意的，对吧？如果是这样，这段代码可以重构很多。

我还建议问题的作者看看缓存 jQuery 选择器，这将整理和提高性能。

suggested refactoring

现在代码已经形成，可以流畅阅读了

【参考方案1】：

您可以像这样跟踪悬停状态：

var isHovered = false;
$("#slideshow").hover(function(e)
    isHovered = e.type == 'mouseenter';
);

从那里，可以将整个开关包装在 if(!isHovered) ... 中，这意味着只要幻灯片悬停，计时器就会立即跳到设置下一个超时。

【讨论】：

这解决了我的问题。 tnx,tnx,tnx alote mate, 尊重.... 现在代码可以完美运行了。

恭喜您获得简单但有效且快速的答案。

【参考方案2】：

这是 .stop() 文档：http://api.jquery.com/stop/

那里写着你可以为“jumpToEnd”传递一个参数。如果该参数为假，则动画将持续到结束。我认为你的代码应该是这样的：

$("#slideshow").hover(function()
          $(this).stop(true,false);
    );  );

【讨论】：

不跳到结尾，stop 只会让动画保持在当前状态，不是吗？这与让动画完成然后停止完全不同。

tnx 寻求建议，但是当我将 .stop(true,true) 更改为 .stop(true,false) 时，情况变得更糟，图像中途立即停止。

是的，看来我错了。您可以设置一个变量 wasStop = false，并在悬停时使其为真。在动画结束时添加回调函数并检查是否停止==true，然后在您的元素上应用 .stop。

这里是一个例子：jsfiddle.net/5yhYD/4。如果你在第一个方块到达 margin-left:200px 之前点击第二个方块，那么第一个 div 将停在 200px，否则它会回来。

【参考方案3】：

您可以持有对计时器的引用。然后，您只需清除正在安排动画的计时器，而不是停止动画。因此当前动画将继续播放，但不会安排再次运行。 如果你使用 javascript setTimeout 你可以这样做

vat timer=setTimeout(animation_function, delay);
 //to stop later
clearTimeOut(timer);

但我认为您正在使用 jquery 计时器插件您的 $.timer 插件仍然应该有一个明确的方法来停止运行再次检查文档。

看看这个Post 几乎是同一个问题。