JQuery: how to perform sequential and simultaneous animations

Question

I want the screen element (whose identifier is #sign1 ) to move in a sine wave.
To do this, I need sequential UP-and-DOWN 'wobbles', all while it moves to the right at the same time .

But I really don't understand the lines that are so necessary for sequential animations.

I can do 2 simultaneous animations .,

• eg. while moving up and to the right,
• putting queue: false on both,

and I can do 2 consecutive animations .,

• eg. move up, then later DOWN,
• by binding .delay(1000).queue(function(n) { between

., but I cannot make 3 or more consecutive oscillations, simultaneously with the movement to the right.

Below you see that I can get 2 DOWN-wobbles by skipping UP-wobble between them, which strangely doesn't work. Also here is his fiddle: JS Fiddle

Javascript

 //MOVE RIGHT FOR 7 seconds: $("#sign1").animate( {left: '+=80%'}, { duration: 7000, queue: false } ); //WOBBLE DOWN for 1 second $("#sign1") .animate( { top: '+=15%'}, { duration: 1000, queue: false } ).delay(1000) //WOBBLE UP for 1 second (Doesn't work) .queue(function(n) { $(this) .animate( {top: '-=15%'}, { duration: 1000, queue: false } //WOBBLE DOWN for 1 second (WORKS!) ).delay(2000) .animate( {top: '+=5%'}, { duration: 1000, queue: false} ) }); 

Answer 1

The solution is to leave

• animate(properties, [Options]) format ,

and use instead

• animate(properties [, duration ] [, easing ] [, complete ]) format .

This allows us to perform several animations at the same time (for example, UP and RIGHT), as well as issue callback functions (in the [, complete] parameter), then to perform another set of simultaneous animations (for example, DOWN and RIGHT).

Here is a successful violin .

JQuery for animated sine wave:

 $("#sign1").animate({ left: [ '+=8%', 'linear' ], top: [ '+=5%' , 'swing' ] }, 1000, null, function() { $(this).animate({ left: [ '+=8%', 'linear' ], top: [ '-=5%' , 'swing' ] }, 1000, null, function() { $(this).animate({ left: [ '+=8%', 'linear' ], top: [ '+=5%' , 'swing' ] }, 1000, null, function() { $(this).animate({ left: [ '+=8%', 'linear' ], top: [ '-=5%' , 'swing' ] }, 1000, null, function() { //(etc. -- If more iterations are needed) }) }) }) })