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)，这将在执行该功能之前等待一段时间。如果将这两个结合起来，就可以获得动画。

希望这会有所帮助：＆gt;

PS。通过CSS

可以更容易地实现这些

＆＃13;

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

＆＃13;

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

＆＃13;

<body>

<div id="small-circle"></div>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

＆＃13;

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

1 个答案: