无法清除动画上的间隔

Can't clearInterval on animation

本文关键字：动画 清除      更新时间：2023-09-26

我对这段代码有一些问题，在这种情况下，我将div 设置为按钮，当我单击按钮时，一切都按预期工作，但是当我想使用 clearInterval 停止动画时，它不起作用，只是不断循环......我做错了什么？

var timeout; 
var d1=$(".drum1");
function dani1(){
d1.animate({height:'150px', width:'150px', opacity:'0.4'},"slow");
d1.animate({height:'100px', width:'100px',opacity:'0.8'},"fast");
}
d1.click(function(){
if (!timeout){
    timeout = setInterval(dani1, 200);
} else {
     clearInterval(timeout);
     timeout = null;
   }
});
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

你根本不需要setInterval。

var d1 = $(".drum1").data('end', true);
function dani1() {
  if (d1.data('end'))
    return d1.stop(true, true);
  
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow")
    .animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast", dani1);
}
d1.click(function() {
 if (!d1.data('end'))
    d1.data('end', true);
 else {
    d1.data('end', false);
    dani1();
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

问题是你对setInterval()的使用，它会每 200 毫秒排队很多动画，所以即使在清除间隔后，动画队列中也存在很多动画。

一个简单的解决方案是同时清除动画队列

var timeout;
var d1 = $(".drum1");
function dani1() {
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow");
  d1.animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast");
}
d1.click(function() {
  if (!timeout) {
    timeout = setInterval(dani1, 200);
  } else {
    d1.stop(true, true)
    clearInterval(timeout);
    timeout = null;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

无间隔

var play;
var d1 = $(".drum1");
function dani1() {
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow");
  d1.animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast");
  return d1.promise();
}
d1.click(function() {
  if (play) {
    play = false;
    d1.stop(true, true)
  } else {
    play = true;
    anim();
  }
  function anim() {
    dani1().done(function() {
      if (play === true) {
        anim();
      }
    })
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

相关文章：