Jquery：如何同时进行连续和同时动画
我想要一个屏幕元素（其ID为#sign1 ）以正弦波移动。
为此我需要连续向上和向下’摆动’，同时它同时向右移动。
但我并不真正了解队列 ，这对于连续的动画来说是非常必要的。
我可以同时做2 个动画。 。 。
- 例如，同时向上和向右移动，
- 通过将
queue: false放在两者上，
我可以做两个连续的动画，。 。 。
- 例如，向上移动，然后向下移动，
- 通过链接
.delay(1000).queue(function(n) {在它们之间
。 。 。 但我似乎无法做三次或更多连续摆动，同时向右移动。
在下面，你看，我可以得到2次向下摆动，跳过它们之间的向上摆动，这奇怪地不起作用。 此外，这是它的小提琴： JS小提琴
使用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} ) });
解决方案是离开
-
animate(properties, [Options])格式 ，
而是使用
-
animate(properties [, duration ] [, easing ] [, complete ])格式 。
这允许我们同时进行多个动画（例如UP和RIGHT），并发出回调函数（在[, complete]参数中），然后执行一组不同的同步动画（例如DOWN和RIGHT）。
这是成功的小提琴 。
动画正弦波的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) }) }) }) })