间隔内的动画

Question

我对间隔动态感到困惑。

我有六秒的间隔，我希望在回调中运行另一个动画的动画，在第二个动画的回调中运行第三个动画。

虽然我的动画是800毫秒加上2000毫秒的延迟，但它们不会在6000毫秒间隔内被处理并被跳过。我错过了什么？

var myVar;
var countit;
countit = 1;

function myFunction() {
    myVar = setInterval(slideit, 6000);
}

function slideit() {
    $(".imgcontainer").animate({
        "top": -($(".imgcontainer").height() * countit)
}, 300, function () {
    $(".bannertext").animate({
        opacity: 1,
            "margin-top": "30px",
            "font-size": "2em"
    }, 300, function () {
        $(".bannertext").delay(2000).animate({
            opacity: 0,
                "margin-top": "0px",
                "font-size": "1em"

        }, 200);
    });
});

countit = countit + 1;
if (countit == $(".imgcontainer").length) {
    countit = 0;
}
}

myFunction();

这是小提琴：http://jsfiddle.net/1wfd4gdn/7/

Answer 1

无需回调。默认情况下，Jquery动画函数在队列中执行。参考：http://api.jquery.com/animate/#animate-properties-options

$(".imgcontainer").animate({
    "top": -($(".imgcontainer").height() * countit)
}, 300)
$(".bannertext").animate({
      opacity: 1,
       "margin-top": "30px",
        "font-size": "2em"
}, 300)
$(".bannertext").delay(2000).animate({
        opacity: 0,
       "margin-top": "0px",
        "font-size": "1em"
 }, 200)

http://jsfiddle.net/souravb/1wfd4gdn/8/