Способ иметь повторяющуюся последовательность анимаций, пока не прервана?

Question

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

1. Анимировать DIV до left: -200px; top: -200px
2. Анимировать DIV до left: 0px; top: -400px
3. Анимировать 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

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

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

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

Answer 3

Это будет работать, но вы не увидите ничего в 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();