How to perform two animations simultaneously on the same object with different timers?

Question

I'm trying my luck at some basic animation following a basic tutorial over here.

In this tutorial, an object moves one way, then returns. Fairly simple.

What I'd like to do however is have that basic animation going on, while applying another animation simultaneously.

For example, as the ball is going left to right at say 500ms a transition, there is another animation going on which happens every 3000ms, perhaps it is going up and down a little bit. I am doing this to create an irregular pattern.

I tried doing something like this:

(this is using jquery and the timers plugin)

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
});

And also:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
});

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
});

In both cases it seems that the first animation finishes, then the next one starts... then it loops, rather than at the same time.

What am I missing or what do I need to research to do this?

Thanks for your time!

Possible duplicate: [stackoverflow.com/q/687495](http://stackoverflow.com/q/687495/520779) (*Edit:* not really, the other question is about two different objects, not the same one) — mgibsonbr, Mar 03 '12 at 01:49

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

Have you tried setting queue to false? See this answer in a related question.

For that to work, you might also have to put the second animate in the callback of the first (for each dimension), since they won't be queued anymore:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1").animate ({top:"60px"}, {duration:6000, queue:false, complete:function() {
        $("#ball1").animate ({top:"57px" }, {duration:6000, queue:false} );
    }} )
    $("#ball1").animate ({left:"5px" }, {duration:9000, queue:false, complete:function() {
        $("#ball1").animate ({left:"0px" }, {duration:9000, queue:false} );
    }} )
});

Live example at jsFiddle

Update: If using jQuery 1.7, you can use a string as the queue value, thus eliminating the need of a callback:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1")
        .animate ({top:"60px"}, {duration:6000, queue:"top"} )
        .animate ({top:"57px" }, {duration:6000, queue:"top"} )
        .animate ({left:"5px" }, {duration:9000, queue:"left"} )
        .animate ({left:"0px" }, {duration:9000, queue:"left"} );
});

(Edit: I couldn't make that example work; maybe I can't use arbitrary values to queue?)

edited May 23 '17 at 12:31

Community

1
1

answered Mar 03 '12 at 01:53

mgibsonbr

21,755
7
70
112

@cosmicbdog Updated the answer based on the [api docs](http://api.jquery.com/animate/) – mgibsonbr Mar 03 '12 at 02:17
Thanks for that @mgibsonbr. But this still animates one at a time... ie it will first perform horizontal animation, then vertical. I thought of another solution whereby I wrapped #ball1 in another div. I then animate the wrapping div with the horizontal animation, while performing the inner div with the vertical animation. – willdanceforfun Mar 03 '12 at 02:32
What was your problem? I tested the first code at [jsFiddle](http://jsfiddle.net/mgibsonbr/YQD7G/) (1 loop only) and it worked fine. Couldn't make the second work though... – mgibsonbr Mar 03 '12 at 02:47
INteresting! I will have to try again - I can see it works on the jsfiddle. Cheers! – willdanceforfun Mar 03 '12 at 04:50

score 1 · Answer 2 · answered Mar 03 '12 at 01:59

I think you would benefit from the 'step' option:

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

"step: A function to be called after each step of the animation."

Extract:

Step Function

The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

now: the numeric value of the property being animated at each step


fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

The OP wants to animate each dimension using a different duration. — mgibsonbr, Mar 03 '12 at 02:07
I believe that if the step period id short enough the OP can determine if 'now' if an appropriate time to do the animation in each case for each property, such as by using a comparison of 'now'? Looking forward to other answers too. — MyStream, Mar 03 '12 at 02:10

How to perform two animations simultaneously on the same object with different timers?

2 Answers2