重複動畫序列直到被中斷的方法嗎？

動畫DIV到left: -200px; top: -200px
動畫DIV到left: 0px; top: -400px
動畫DIV到left: -200px; top: -600px
轉到1，重複直到一些用戶事件中斷

2012-03-19 CaptSaltyJack

是，這是可行的。你嘗試了什麼，你遇到了什麼問題？ – 2012-03-19 20:53:49

只是想知道是否有更好的辦法比做像西蒙的答案（我已經嘗試和工作）。 – CaptSaltyJack 2012-03-19 21:03:20

哈哈，它是一個完全不同的問題，你應該提出你做了什麼，並要求如何使它更清潔;-) – 2012-03-19 21:05:49

我不太明白你想要的精確尺寸，但你可以在你想要的值填入。這是一般的想法。 jQuery動畫進入隊列並自然地鏈接在一起，因此您可以將它們全部關閉，然後將它們排隊，然後使用最後一個的完成功能重新啓動它，如下所示：

function go() { 
    $("#box") 
     .animate({left: "100px", top: "0"}, 1000) 
     .animate({left: "400px", top: "0"}, 1000) 
     .animate({left: "400px", top: "400px"}, 2000) 
     .animate({left: "100px", top: "400px"}, 2000, go); 

} 

go(); 

$("#stop").click(function() { 
    $("#box").stop(true); 
}); 

$("#start").click(go);

您可以隨時通過在動畫對象上調用jQuery .stop(true)方法來停止動畫。這裏有一個工作演示：http://jsfiddle.net/jfriend00/PnzQ9/

來源

2012-03-19 21:07:08 jfriend00

這將起作用，但您在http://jsfiddle.net/rQCz7/3/之外看不到任何內容。也許你會得到一些關於如何完成它的提示。

var div = $("div"); 

function animate(){ 
    div.animate({left: -200, top: -200}, 5000) 
     .animate({left: 0, top: -400}, 5000) 
     .animate({left: -200, top: -600}, 5000, animate); 
} 
animate();

來源

2012-03-19 21:02:09

是的，這是我目前的。工作好，只是想知道是否有一個更優雅的解決方案。 – CaptSaltyJack 2012-03-19 21:03:51

您不需要將這些嵌套在完成函數中。動畫自然地相繼鏈接在一起。 – jfriend00 2012-03-19 21:05:57

我剛剛進入它，我更新了我的例子和小提琴 – 2012-03-19 21:11:28

而且具有一定的用戶事件停止動畫，你可以做，例如：

$('#stop_link').click(function() { 
    $('#box').stop(true, true); 
    return false; 
});

有關停止方法的更多信息，請訪問http://api.jquery.com/stop/

來源

2012-03-19 21:09:52 Pieter

重複動畫序列直到被中斷的方法嗎？

回答

相關問題