为什么这个 <div> 元素不会按照我希望的方式移动 jQuery？

Question

我正在做一个小小的 jQuery 编码挑战，试图让一个圆在正方形的页面上移动。在这一点上，我已经尝试了很多不同的方法。我希望我能向您展示我尝试过的所有不同方法，但此时工作量太大。相反，请参阅下面的最新尝试：

<body>

<div id="small-circle"></div>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">

function moveCircle () {

  $("#small-circle").offset({left: 200, top:0});
  $("#small-circle").offset({left: 0, top:200});
  $("#small-circle").offset({left: -200, top:0});
  $("#small-circle").offset({left: 0, top:-200});

}

setInterval(moveCircle, 3000);


</script>

我通过尝试得出的结论是，我指定的偏移运动最终会相互抵消，而圆圈根本不会移动。如果我只使用一种 .offset() 方法，圆圈将按照我指定的方向移动。如果我添加更多，它似乎会根据我指定的运动计算出一条线，然后沿着该线移动。所以我认为，因为我指定的运动加起来为零（200 + 0 + 0 + 200 - 200 + 0 + 0 -200 = 0），圆圈根本没有移动。希望这一切都有意义。我怎样才能让圆在一个完美的正方形中移动，向右移动 200px，然后向下移动 200px，向左移动 200px，然后向后移动 200px？

非常感谢帮助一个脑洞不大的菜鸟！

Answer 1

setInterval(function,x) 每 x 次调用该函数。该函数可能运行在 1 秒内，但它将在该 x 时间段内被调用。

您需要添加的是 setTimeout(function,y) 这将在执行函数之前等待 y 时间。如果你结合这两个，你可以得到你的动画。

希望对您有所帮助 :>

PS。通过 CSS

可以更简单地完成这些操作

function moveCircle () {
  setTimeout(function(){$("#small-circle").offset({left: 200, top:0});}, 1000);
  setTimeout(function(){$("#small-circle").offset({left: 200, top:200});}, 2000);
  setTimeout(function(){$("#small-circle").offset({left: 0, top:200});}, 3000);
  setTimeout(function(){$("#small-circle").offset({left: 0, top: 0});}, 4000);
}

setInterval(moveCircle, 4000);

#small-circle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: tomato;
}

<body>

<div id="small-circle"></div>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

为什么这个 <div> 元素不会按照我希望的方式移动 jQuery？

How come this <div> element won't move the way I want it to using jQuery?

javascript

jquery

animation

offset

setinterval