Способ повторения последовательности анимаций до прерывания?

Question

Есть ли способ сделать следующее в JQuery:

1. Animate DIV в left: -200px; top: -200px
2. Animate DIV в left: 0px; top: -400px
3. Animate DIV в left: -200px; top: -600px
4. К 1, повторить до некоторых прерываний событий пользователя

Answer 1

Я не совсем понял, какие точные размеры вы хотели, но вы можете заполнить нужные значения. Вот общая идея. 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/

Answer 2

Это будет работать, но вы ничего не увидите в http://jsfiddle.net/rQCz7/3/ couse его вне видового экрана. Может быть, вы немного намекаете, как это сделать.

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

Answer 3

И остановить анимацию с определенным событием пользователя, вы можете сделать, например:

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

Для получения дополнительной информации о методе остановки, перейдите http://api.jquery.com/stop/