动画箭头

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结构正在使用bootstrap

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网站:: http://api.jquery.com/animate/

队列（默认值：true）

类型：布尔值或字符串

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