Question

基本上，我有一个紫色的盒子。我想要动画它并让它向左移动250px，然后我希望它向下移动50px，然后向右移动，并重复该循环。以下是我到目前为止的情况：

<!DOCTYPE html>
<html>
<body>

<div id="goodbox"  style="height:50px;width:40px;background-color:purple;position:absolute"> </div>


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>

<script>
 $(document).ready(function(){
 $("#goodbox").animate({left:"300px"},5000)
$("#goodbox").animate({bottom:"300px"},5000)
})
 </script>



 </body>
 </html>

你看到它动画离开后，然后移动到屏幕的底部，然后动画，但我希望它从它离开的地方移动。所以基本上：向左移动250px; 向下移动20px; 向右移动250px; 向上移动20px; 然后重复

我该怎么做？我只想说我有另外一个蓝盒子。让我说我给这个盒子功能，所以如果我按左键，它将向左，向右键移动。向下键向上键向上键。如果这两个盒子接触，我怎么能让紫色盒子停止移动。提前感谢愿意回答此问题的任何人。

Answer 1

您可以将动画代码封装在普通函数中，并在最后一次调用complete函数的animate回调中传递它。有关详细信息，请查看How can I loop an animation continuously in jQuery?。

Answer 2

您可以在动画中使用相对定位。因此，您可以指定它移动您想要的250px，而不是设置精确的左侧或底部。为此，您可以使用：

$('#goodbox').animate({'left': '-=250px'}, 5000);

要让它一个接一个地动画，您可以使用animate()方法的第3个参数来提供动画完成后发生的回调。例如：

$('#goodbox').animate({'left': '-=250px'), 5000, function() {
    $('#goodbox').animate({'top: '+=20px'}, 5000, function() { ... });
});

要重复此操作，您可以使用window.setInterval()。这允许您每隔x毫秒运行一段javascript。因此，假设您有4个动画，每个动画持续5秒，您需要每20秒运行一次setInterval()。所以你会这样做：

window.setInterval(animations, 20000);

function animations() {
    // All your animation code here
}

希望我已经为您提供了足够的信息以便开始使用。

如何让div元素重复其动画？

2 个答案: