动画箭头

Question

我使用下面的代码来动画一个div类的箭头;

function animUp() { 
    $(".arrow").animate({ 
     top: "0" 
    }, "slow", "swing", animDown); 
} 

function animDown() { 

    $(".arrow").animate({ 

     top: "40px" 

    }, "slow", "swing", animUp); 

} 


$(document).ready(function() { 

    animUp(); 

}); 

这很好地工作，并按预期使动画箭头。然后，我将类“箭头”添加到另一个带有箭头的div中以制作动画，并且它们都停止动画制作，长时间停顿，动画制作，长暂停，动画制作等等。而不是一个箭头的流畅动画。

我也试过让箭头和箭头2在脚本中结合起来，

function animUp() { 
    $(".arrow, .arrow2").animate({ 
     top: "0" 
    }, "slow", "swing", animDown); 
} 

function animDown() { 

    $(".arrow, .arrow2").animate({ 

     top: "40px" 

    }, "slow", "swing", animUp); 

} 


$(document).ready(function() { 

    animUp(); 

}); 

与上述结果相同。我还有什么可以尝试让他们都能顺利进行动画制作？

jsFiddle - 我的HTML结构采用引导

Answer 1

动画添加到队列默认jQuery中，以避免排队，你应该做到以下几点：

function animUp() { 
    $(".arrow, .arrow2").animate({ 
     top: "0" 
    }, { 
     duration: "slow", 
     queue: false, 
     easing: "swing", 
     complete: animDown 
    }); 
} 

function animDown() { 

    $(".arrow, .arrow2").animate({ 

     top: "40px" 

    }, { 
     duration: "slow", 
     queue: false, 
     easing: "swing", 
     complete: animDown 
    }); 

} 

通知如何的只是路过的，而不是“慢”我们现在使用的对象

下面是从jQuery网站::

队列（默认值：真）

类型：Boolean或字符串

一个布尔指示是否置于效果队列中的动画。如果为false，则动画将立即开始。从jQuery 1.7开始，队列选项也可以接受一个字符串，在这种情况下，动画被添加到由该字符串表示的队列中。当使用自定义队列名称时，动画不会自动启动;你必须调用.dequeue（“queuename”）来启动它。