0

基本上，我有一个紫色的盒子。我想对其进行动画处理并使其向左移动 250 像素，然后我希望它向下移动 50 像素，然后向右移动，并重复该循环。这是我到目前为止所拥有的：

<!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；向右移动 250 像素；向上移动 20px；然后重复

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

4

2 回答 2

1

您可以将动画代码封装在一个普通函数中，并在complete最后一次调用函数的回调中传递animate。看看如何在 jQuery 中连续循环动画？了解更多信息。

于 2012-11-04T12:13:00.610 回答
0

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

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

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

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

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

window.setInterval(animations, 20000);

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

希望我已经为您提供了足够的信息来开始。

于 2012-11-04T12:13:26.513 回答