Jquery：如何同时制作连续和同时的动画答案

【问题标题】：Jquery: How to do both successive and simultaneously animationsJquery：如何同时制作连续和同时的动画
【发布时间】：2017-10-26 19:20:12
【问题描述】：

我想要一个屏幕元素（其 ID 为 #sign1）以正弦波移动。
为此，我需要连续上下“摆动”，一直在同时向右移动。

但我不太了解队列，这对于连续的动画来说非常必要。

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

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

我可以制作 2 个连续动画，. . .

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

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

在下面，你看，我可以得到 2 个 DOWN-wobbles，跳过 UP-wobbles，在它们之间，奇怪的是不起作用。另外，这是它的小提琴：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} 
          ) 
  });

【问题讨论】：

您是否考虑过在一次调用中为top 和left 设置动画，例如.animate({top: ..., left: ...})？
是的，有效。（稍作调整）谢谢，@nnnnnn

标签： jquery queue jquery-animate delay simultaneous

【解决方案1】：

解决办法是离开

animate(properties, [Options])format,

改为使用

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

这允许我们同时制作多个动画（例如向上和向右），并发出回调函数（在[, complete] 参数中），然后制作一组不同同时动画（例如向下和正确的）。

这是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)
                })                                                                                  

            })
        })
    })

【讨论】：