Question

这个想法是让div在用户单击“开始”按钮后使用setinterval在顺时针方向循环移动。当用户单击Stop时，setInterval应该停止并返回其原始位置。我无法阻止一切。谢谢。

10.10.2017 00:00:00

date_to

11.10.2017 11:47:00

Answer 1

首先，考虑到变量计时器不在“停止”中附加的事件范围之内。另外，必须考虑到使用动画方法时，动画每50毫秒插入一个队列中（因为您使用的是setInterval），因此必须使用stop（true）清除该队列。

看一下文档及其示例： https://api.jquery.com/stop/

var timer;
$(document).ready(function() {

  $('#start').click(function() {
    timer = setInterval(function() {
      $("#animate").animate({
        'marginLeft': '200px'
      }, 2000)
      $("#animate").animate({
        'marginTop': '200px'
      }, 2000)
      $("#animate").animate({
        'marginLeft': '10px'
      }, 2000)
      $("#animate").animate({
        'marginTop': '0px'
      }, 2000)

    }, 50);

  });
});
$("#stop").click(function() {
  $("#animate").stop(true);
  clearInterval(timer);
});

body {
  border: 1px solid blue;
  width: 237px;
  height: 263px;
}

div {
  margin: 7px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 30px;
  background: yellow;
}

div.newcolor {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="animate"></div>

动画函数后的Jquery-Stop setInterval

1 个答案: