Question

Is there a way to do the following in jQuery:

1. Animate DIV to left: -200px; top: -200px
2. Animate DIV to left: 0px; top: -400px
3. Animate DIV to left: -200px; top: -600px
4. Go to 1, repeat till some user event interrupts

Answer 1

I didn’t quite follow what exact dimensions you wanted, but you can fill in the values you want. Here’s the general idea. jQuery animations go in a queue and are naturally chained one after the other so you can just fire them all off and it will queue them up and then use the completion function on the last one to start it over again like this:

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

You can stop the animation at any time by calling the jQuery .stop(true) method on the animating object. Here’s a working demo: http://jsfiddle.net/jfriend00/PnzQ9/