jQuery Animate 2 actions, same object

Question

I'm trying to animate a ball that bounces and moves forward. First the ball must bounce X times in the same place but then it must go forward bouncing.

BOUNCE:

$("#ball").animate({top:"-=5px"},150).animate({top:"+=5px"},150);

MOVING:

$("#ball").animate({"left":"850px"},2800);

Any suggestion?

[This question](http://stackoverflow.com/questions/10473572/execute-multiple-jquery-effects-on-the-same-element-in-parallel) might be helpful. — Blazemonger, May 16 '13 at 19:33
bouncing ball code is here in another similar question: http://stackoverflow.com/questions/2344804/how-can-i-execute-multiple-simultaneous-jquery-effects — carrabino, May 16 '13 at 19:34

score 1 · Answer 1 · answered May 16 '13 at 19:46

here's a fiddle that does what you want, you can tweak it fairly easily:
http://jsfiddle.net/2LyWM/

$(document).ready(function(){

    $("#ball").queue( function() {

        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });
        $(this).animate({top:'0px'}, { duration: 500, queue: true });
        $(this).animate({top:'+=50px'}, { duration: 500, queue: true });        
        $(this).animate( {left:'+=100px'}, { duration: 2500, queue: false });

        $.dequeue( this );
    });

});

html

<div id="ball">ball</div>

css

#ball{
    top: 0px;
    left: 0px;
    position: relative;
}

in case you're wondering, the "queue: true" tells jquery to "queue this animation" (i.e. wait until other animations have finished before starting). The last animation line (queue: false) tells jquery to run the animation immediately, which gives you the effect you want. Also, you can add up the duration of all queue=true animations (3,500) and that will be the total time that the animation will run. I set the left animation to 2,500 (1000 ms early). — carrabino, May 16 '13 at 19:50

score 0 · Accepted Answer · answered May 16 '13 at 19:36

Here's one approach. To get the ball to bounce X times, we can create a recursive function which takes advantage of jQuery animation queues:

function bounce(n) {
    if (n > 0) {
        $("#ball").animate({top: "-=5px"}, 150)
            .animate({top: "+=5px"}, 150, function() {
                bounce(n-1); 
            });
    }
};
bounce(3);

To get it to roll afterwards and continue bouncing, we need to use .dequeue() to run both animations at once:

$("#ball").animate({"left": "850px"}, 2800).dequeue();
bounce(10);

Now, to combine them, create a special callback function which will only run after the Xth bounce:

function bounce(n, callback) {
    if (n > 0) {
        $("#ball").animate({top: "-=5px"}, 150)
            .animate({top: "+=5px"}, 150, function () {
                bounce(n-1, callback);
            });
    } else if (callback) { // might be undefined
        callback();
    }
};

bounce(3, function() {
    $("#ball").animate({"left": "850px"}, 2800).dequeue();
    bounce(10);
});

http://jsfiddle.net/mblase75/c72Qj/

jQuery Animate 2 actions, same object

2 Answers2