Question

我对这段代码有一些问题，在这种情况下我将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>

Answer 1

问题在于你使用setInterval()，它会每隔200ms对很多动画进行排队，因此即使在清除间隔后，动画队列中也会有很多动画。

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

＆＃13;

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;
  }
});

＆＃13;

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

＆＃13;

没有间隔

＆＃13;

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();
      }
    })
  }
});

＆＃13;

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

＆＃13;

Answer 2

您根本不需要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>

无法清除动画上的间隔

2 个答案: