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

我认为你会受益于'step'选项：

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

“step：在动画的每个步骤之后调用的函数。”

摘录：

步骤功能

.animate（）的第二个版本提供了一个步骤选项 - 在动画的每一步触发的回调函数。此功能对于启用自定义动画类型或在动画发生时更改动画非常有用。它接受两个参数（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函数。例如，给定两个列表项，步骤函数在动画的每一步触发四次：

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

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

2 个答案: