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

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"} );
});

（编辑：我无法使该示例工作；也许我不能使用任意值来排队？）

Answer 2

我认为您会从“步骤”选项中受益：

http://api.jquery.com/animate/

"step：动画每一步之后调用的函数。"

摘录：

阶梯函数

.animate() 的第二个版本提供了一个 step 选项——在动画的每个 step 中触发的回调函数。此功能对于启用自定义动画类型或更改正在发生的动画很有用。它接受两个参数（now 和 fx），并将其设置为正在动画的 DOM 元素。

now: the numeric value of the property being animated at each step


fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

请注意，每个动画元素上的每个动画属性都会调用 step 函数。例如，给定两个列表项，step 函数在动画的每一步触发四次：

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});