jQuery停止循环动画方法不起作用答案

【问题标题】：jQuery stop loop animation method not workingjQuery停止循环动画方法不起作用
【发布时间】：2021-04-16 07:19:51
【问题描述】：

我在使用 jQuery stop() 函数停止我的动画的无限循环 时遇到问题。动画队列如下：

将 div 框向右移动 300 像素
将 div box 背景颜色更改为绿色
双倍大小的 div 框
将div 框移回原来的位置（marginLeft 0 px）
将 div box 的大小改回原来的大小
将 div box 背景颜色改回黄色

div box的原始属性：

marginLeft: 0 像素
背景颜色：黄色
宽度和高度：100 像素

这是我尝试过的代码：

<html>
<head>

<style>

    #box
    {
        background: yellow;
        height: 100px;
        width: 100px;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script> 
   $(document).ready(function(){

      $("#startBtn").click(function loop(){
         $("#box").animate({marginLeft: '300px'});
         $("#box").animate({backgroundColor: 'green'});
         $("#box").animate({width: '200px',height: '200px'});
         $("#box").animate({marginLeft: '0px'});
         $("#box").animate({width: '100px',height: '100px'});
         $("#box").animate({backgroundColor: 'yellow'});

         setInterval(loop,0000);

      });

      $("#stopBtn").click(function(){

          $("#box").stop(true,true); // stop animation & immediately go to end of animation

      });

  });

</script> 

</head>

<body>

<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>

<br/> <br/>

<div id="box"></div>

</body>
</html>

根据我对 jQuery stop() 方法的了解，第一个参数表示是否清除所有动画队列。第二个表示是否立即结束当前动画。

我不知道为什么当我执行 stop(true,true) 函数时，动画仍然无限继续。（不停）

我的stopBtn jQuery 代码应该停止执行任何动画并在点击停止按钮之前立即转到当前正在执行的动画结束。

请帮忙。

【问题讨论】：

标签： jquery

【解决方案1】：

你应该像这样为设置的间隔分配一个句柄

<script> 
     $(document).ready(function(){
     var animHandle;
     $("#startBtn").click(function loop(){
     $("#box").animate({marginLeft: '300px'});
     $("#box").animate({backgroundColor: 'green'});
     $("#box").animate({width: '200px',height: '200px'});
     $("#box").animate({marginLeft: '0px'});
     $("#box").animate({width: '100px',height: '100px'});
     $("#box").animate({backgroundColor: 'yellow'});

      animHandle = setInterval(loop,0000);

     });

      $("#stopBtn").click(function(){

          clearInterval(animHandle); // stop animation at the 
end of queue execution

       });

       });

    </script>

【讨论】：

按照您上面的建议进行了尝试，但不起作用。在 W3Schools 在线 HTML 编辑器上试用。执行 clearInterval() 后动画仍然继续。

【解决方案2】：

你必须在 document.ready 函数之外设置函数，它会在完全迭代后停止，当你点击停止按钮时等待并观察，至少等待 1 次迭代。

var intervalId;
var a = function() { 
    $("#box").animate({marginLeft: '300px'});
     $("#box").animate({backgroundColor: 'green'});
     $("#box").animate({width: '200px',height: '200px'});
     $("#box").animate({marginLeft: '0px'});
     $("#box").animate({width: '100px',height: '100px'});
     $("#box").animate({backgroundColor: 'yellow'});
}

$(document).ready(function(){
    $("#startBtn").click(function(){
        intervalId = setInterval(a,1000);
    });

    $("#stopBtn").click(function(){
        clearInterval(intervalId);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    #box
    {
        background: yellow;
        height: 100px;
        width: 100px;
    }

</style>
</script>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>

<br/> <br/>

<div id="box"></div>

【讨论】：

【解决方案3】：

这是我找到的解决方案。一旦stopBtn 被执行，它将停止当前正在执行的动画并转到该动画的结尾。

首先，创建一个包含所有动画队列的 JavaScript 函数 animationList()。

其次，声明一个变量animationQueue。这将存储setInterval() 请求。

第三，创建一个jQuerystartBtn点击函数。此函数使用 setInterval() 启动 animationList() 内的动画队列，将每个动画之间的间隔设置为 1 秒。

最后，创建一个 jQuery stopBtn 点击函数。您必须使用 clearInterval() 方法清除动画之间设置的 1 秒间隔。然后，执行jQuerystop(true,true)，清空animationList()内部定义的动画队列（第一个参数为true），停止当前动画，到动画结束（第二个参数为true）。

<html>
<head>

<style>

    #box
    {
        background: yellow;
        height: 100px;
        width: 100px;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script> 
$(document).ready(function(){
  
  var animinationQueue;

  $("#startBtn").click(function (){
    
    animinationQueue
        = setInterval(animationList,1000);

    });
  
  $("#stopBtn").click(function(){
    
    clearInterval(animinationQueue);
    
    $("#box").stop(true,true); // stop all animination & go to the end of animination
    
  });

  function animationList()
  {
    $("#box").animate({marginLeft: '300px'});
    $("#box").animate({backgroundColor: 'green'});
    $("#box").animate({width: '200px',height: '200px'});
    $("#box").animate({marginLeft: '0px'});
    $("#box").animate({width: '100px',height: '100px'});
    $("#box").animate({backgroundColor: 'yellow'});
  }
  
});

</script> 

</head>
<body>

<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>

<br/> <br/>

<div id="box"></div>

</body>
</html>

【讨论】：

animationList()、startBtn、stopBtn等所有函数都必须在document.ready(function(){})中