Question

我想要一个屏幕元素（其ID为#sign1）以正弦波移动为此，我需要连续 UP-and-DOWN＆＃39; wobbles＆＃39;，所有这一切都同时向右移动。

但我并不真正理解队列，这对于连续动画来说是非常必要的。

我可以做2个同步动画，。。。

e.g。同时向上和向右移动，
将queue: false放在两者上，

我可以做2个连续动画，。。。

e.g。向上移动，然后向下移动，
在他们之间链接.delay(1000).queue(function(n) {

。。。但我似乎无法做出3次或更多次连续摆动，同时还有向右运动。

在下面，你看，我可以得到2次向下摆动，在它们之间跳过向上摆动，这奇怪地不起作用。此外，这里是它的小提琴：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

解决方案是离开

animate(properties, [Options]) format，

而是使用

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

这允许我们同时进行多个动画（例如UP和RIGHT），并发出回调函数（在[, complete]参数中），然后执行不同的同步动画集（例如DOWN和RIGHT）。

这里是successful fiddle。

动画正弦波的Jquery：

$("#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：如何同时进行连续和同时动画

的Javascript

1 个答案:

动画正弦波的Jquery：