jquery - 如何使用不同的计时器在同一对象上同时执行两个动画？

Question

我正在尝试一些基本动画，如下 a basic tutorial over here .

在本教程中，对象单向移动，然后返回。相当简单。

但是，我想做的是让基本动画继续进行，同时应用另一个动画。

例如，当球以 500 毫秒的速度从左向右移动时，会出现另一个动画，每 3000 毫秒发生一次，也许它会稍微上下移动。我这样做是为了创建一个不规则的图案。

我尝试做这样的事情:

(这是使用 jquery 和计时器插件)

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
});

还有:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
});

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
}); 

在这两种情况下，似乎第一个动画完成，然后下一个动画开始......然后它循环，而不是同时。

我缺少什么或者我需要研究什么才能做到这一点？

感谢您的宝贵时间!

Answer 1

您是否尝试将queue设置为false？请参阅this answer在相关问题中。

为此，您可能还必须将第二个动画放入第一个动画(对于每个维度)的回调中，因为它们将不再排队:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1").animate ({top:"60px"}, {duration:6000, queue:false, complete:function() {
        $("#ball1").animate ({top:"57px" }, {duration:6000, queue:false} );
    }} )
    $("#ball1").animate ({left:"5px" }, {duration:9000, queue:false, complete:function() {
        $("#ball1").animate ({left:"0px" }, {duration:9000, queue:false} );
    }} )
});

实时示例 jsFiddle

更新:如果使用 jQuery 1.7，您可以 use a string作为 queue 值，从而消除了回调的需要:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1")
        .animate ({top:"60px"}, {duration:6000, queue:"top"} )
        .animate ({top:"57px" }, {duration:6000, queue:"top"} )
        .animate ({left:"5px" }, {duration:9000, queue:"left"} )
        .animate ({left:"0px" }, {duration:9000, queue:"left"} );
});

(编辑:我无法使该示例工作；也许我无法使用任意值来排队？)