Jquery: How to do both successive and simultaneously animations

问题

I want a screen-element (whose ID is #sign1) to move in a sinusoidal wave.
For this I need successive UP-and-DOWN 'wobbles', all while it is simultaneously moving RIGHT.

But I don't really understand queues, which are so necessary for successive animations.

I can do 2 simultaneous animations, . . .

e.g. moving UP and RIGHT at the same time,
by putting queue: false on both,

and I can do 2 successive animations, . . .

e.g. moving UP, then later DOWN,
by chaining .delay(1000).queue(function(n) { in between them

. . . but I can't seem to do 3-or-more successive wobbles, simultaneously WITH the rightward motion.

Here below, you see, that I can get 2 DOWN-wobbles, skipping the UP-wobble, in between them, which strangely doesn't work. Also, here's its 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} 
          ) 
  });

回答1:

The solution is to leave the

animate(properties, [Options]) format,

and instead use the

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

This allows us to do multiple animations simultaneously (e.g. UP and RIGHT) , AND issue callback functions (in the [, complete] parameter), to then do a different set of simultaneous animations (e.g. DOWN and RIGHT).

Here's the successful fiddle.

Jquery for an Animated Sinusoidal 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)
                })                                                                                  

            })
        })
    })

来源：https://stackoverflow.com/questions/44192393/jquery-how-to-do-both-successive-and-simultaneously-animations

标签

jquery

queue

jquery-animate

delay

simultaneous