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

Posted 2023-05-08

【中文标题】Jquery：如何同时制作连续和同时的动画

【英文标题】：Jquery: How to do both successive and simultaneously animations

【发布时间】：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

【参考方案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)
                )                                                                                  

            )
        )
    )