如何讓div元素重複動畫？

基本上，我有一個紫色的盒子。我想動畫並使其向左移動250px，然後我希望它向下移動50px，然後向右移動，然後重複該循環。以下是我迄今爲止：如何讓div元素重複動畫？

<!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; 然後重複

我該怎麼做？讓我們只是說我有這個藍色的盒子。可以說我給這個盒子的功能，所以如果我按左鍵，它會左移，右鍵右鍵。向下鍵和向上鍵。如果這兩個盒子接觸，我怎麼能讓紫色盒子停下來呢？預先感謝任何願意回答此問題的人。

來源

2012-11-04 Logan545

可能的重複[可以通過編程鏈接jQuery動畫？]（http://stackoverflow.com/questions/12436701/can-jquery-animations-be-chained-programmatically） – Bergi

您可以將動畫代碼封裝在普通函數中，並將其傳遞給最後一次調用animate函數的complete回調函數。請參閱How can I loop an animation continuously in jQuery?瞭解更多信息。

來源

2012-11-04 12:13:00

您可以在動畫中使用相對定位。因此，不要設置確切的左側或底部，您可以指定它移動所需的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秒，您需要每20秒運行一次setInterval()。所以你會這樣做：

window.setInterval(animations, 20000); 

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

希望我已經給你足夠的信息開始。

來源

2012-11-04 12:13:26 Josh

不，不要使用'setInterval'重複動畫 - 這是漂移 – Bergi

你介意在這一點上擴大嗎？也許我可以從中學到一些東西。我不明白你的意思是「漂流」。 – Josh

'setTimeout' /'setInterval'不是確切的，它們可以[由瀏覽器延遲]（http://stackoverflow.com/a/10740558/1048572） - 你不應該使用它們作爲時鐘。由於動畫方法提供了一個回調，當動畫完成時它完全觸發*，您應該使用它 - 額外的不相關的超時可能會導致奇怪的競爭條件。 – Bergi

如何讓div元素重複動畫？

回答

相關問題