jQuery loop animations on same object at the same time

Question

Is it possible to animate the same object with different speeds and starting at the same time?

function loop_horiz(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ left: d + '200' },
     4000, function() { loop_horiz(direction * (-1)) });
}

function loop_vert(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ bottom: d + '200' },
    2000, function() { loop_vert(direction * (-1)) });
}

loop_horiz(1);
loop_vert(1)

@GlauberRocha, it doesn't need 'px', @David, it works, but the animations are queueing. If I set queue: false, the animations won't loop — flaviu
– flaviu, Commented Oct 29, 2013 at 9:08

Tibos · Accepted Answer · 2013-10-29 09:24:03Z

1

Normally when animating an object with jQuery, the animation is added to the queue for that object. When previous animations have ended, the animation starts running. Your code above does exactly that, animates horizontally, then vertically.

This behavior can be overwritten by the use of the queue option of the animation (set it to false).

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: false,
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    });
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({      
        bottom: d + '200'
    }, {
        queue: false,
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    });

}

loop_horiz(1);
loop_vert(1)

Another (uglier) possibility is to merge the animations, but it would require you to split the horizontal animation in two for half the distance running over 2s.

http://api.jquery.com/animate/

Even better, with queue as string you can add the animations to different queues. Same code as above, but using different queues for vertical and horizontal animation:

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: 'horizontal',
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    }).dequeue('horizontal');
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        bottom: d + '200'
    }, {
        queue: 'vertical',
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    }).dequeue('vertical');

}

loop_horiz(1);
loop_vert(1)

DEMO: http://jsfiddle.net/Uewzc/1/

edited Oct 29, 2013 at 9:24

answered Oct 29, 2013 at 9:12

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

flaviu Over a year ago

As I responded in an earlier comment, setting the queue to false, stops the loop. Il will try to split the horizontal animation though

flaviu Over a year ago

I think I may have put the queue in the wrong place. I've put the queue and duration in the second parameter and the callback function in the third. So the correct form is that the queue, duration and callback all must be in the second parameter. Thanks!

Tibos Over a year ago

There are two forms of calling the animate method, one with two objects as parameters (where you can specify the queue) and another one with 1-4 parameters. You probably had them confused. The documentation is pretty clear though, check it when you have doubts!

Collectives™ on Stack Overflow

jQuery loop animations on same object at the same time

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related