CODEWITHSUNDEEP
jqueryanimation
CaptSaltyJack
CaptSaltyJack

Reputation: 16045

Way to have repeating sequence of animations till interrupted?

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

Upvotes: 0

Views: 141

Answers (3)

jfriend00
jfriend00

Reputation: 707456

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/

Upvotes: 2

Simon Edström
Simon Edström

Reputation: 6619

This will work, but you will not see anything in http://jsfiddle.net/rQCz7/3/ couse its outside the viewport. Maybe you get some hint about how to complete it.

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

Upvotes: 1

Pieter
Pieter

Reputation: 1774

And to stop the animation with a certain user event, you can do, for instance:

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

For more information about the stop method, go to http://api.jquery.com/stop/

Upvotes: 1

Related Questions