时间戳

首页 > 解决方案 > jQuery停止循环动画方法不起作用

jquery - jQuery停止循环动画方法不起作用

问题描述

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

  1. 将 div框向右移动 300 px
  2. 将div框背景颜色更改为绿色
  3. div框的两倍大小
  4. 将 div框移回原始位置（marginLeft 0 px）
  5. 将 div框的大小更改回原始大小
  6. 将div框背景颜色更改回黄色

div box的原始属性：

  1. marginLeft: 0 像素
  2. 背景颜色：黄色
  3. 宽度和高度：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) 函数时，动画仍然无限继续。（不停止）

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

请帮忙。

标签： jquery

解决方案

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

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

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

三、创建jQuerystartBtn点击功能。这个函数启动里面的动画队列，animationList()使用setInterval()它将每个动画之间的间隔设置为 1 秒。

最后，创建一个 jQuerystopBtn点击函数。您必须使用clearInterval()方法清除动画之间设置的 1 秒间隔。然后，执行jQuery stop(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>

推荐阅读