jQuery:如何同时进行连续动画和同时动画 [英] Jquery: How to do both successive and simultaneously animations

问题描述

我希望屏幕元素(其ID为#sign1)以正弦波移动.
为此，我需要成功上下摆动"， 同时同时向右移动.

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.

我可以制作2个同时动画. . .

I can do 2 simultaneous animations, . . .

• 例如同时向上和向右移动
• 同时在两者上都放queue: false

，我可以制作2个成功动画. . .

and I can do 2 successive animations, . . .

• 例如向上移动，然后向下移动
• 通过在它们之间链接.delay(1000).queue(function(n) {

. . .但我似乎无法与向右运动同时进行3个或更多的连续摆动.

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

在下面，您会看到，我可以在它们之间获得2个DOWN摆动，而跳过UP摆动，这很奇怪.另外，这是它的小提琴: JS小提琴

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

//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} 
          ) 
  });

推荐答案

解决方案是离开

• animate(properties, [Options]) 格式，

而是使用

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

这允许我们同时制作多个动画(例如UP和RIGHT)，并发出回调函数(在[, complete]参数中)，然后制作一组不同的同时动画(例如DOWN)和右).

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).

这是成功的小提琴.

$("#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)
                })                                                                                  

            })
        })
    })

这篇关于jQuery:如何同时进行连续动画和同时动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！