jQuery时序SetInterval

Question

好的，所以我显然在这里遗漏了一些东西。我知道这会回到同步/异步的事情，但我无法弄明白。

我正在尝试构建一个图像轮播，在悬停结束时将一行图像向左滑动，并在悬停结束时停止滑动。

滑块的一般逻辑如下：

默认状态：有一堆图像浮动在彼此旁边，延伸超过视口的边缘： （哈希标志是视口）

＃ [IMAGE-1] [IMAGE-2] ＃ [IMAGE-3]

我使用animate为IMAGE-1提供负边距，将其拉出视口。

[IMAGE-1] ＃ [IMAGE-2] [IMAGE-3] ＃

然后我会将IMAGE-1移动到序列的末尾，将其边距设置为0，然后重新执行。

＃ [IMAGE-2] [IMAGE-3] ＃ [IMAGE-1]

所以我的问题是，在动画结束之前，IMAGE-1将被移动到序列的末尾。我假设正在发生的事情是“动画”功能和移动图像1的位同时发射。我想按顺序发出这些命令，这样当一个完成时，另一个开始。

这是我的功能：

function slideLoop(div) {
    var width = div.find("img:first").width();
    var i = setInterval(function(){
        var images = div.find("img");
        var first = images.first();
        images.last().css("marginLeft", 0);
        first.animate({marginLeft: 0 - width + "px"}, 4000, "linear");
        images.last().after(images.first());
    }, 4000);
}

提前致谢。

Answer 1

正如@roasted所说，你需要在回调函数中注册动作，animate设置一切，但不等待动画师发生就返回：

function slideLoop(div) {
    var width = div.find("img:first").width();
    var i = setInterval(function(){
        var images = div.find("img");
        var first = images.first();
        images.last().css("marginLeft", 0);
        first.animate({marginLeft: 0 - width + "px"}, 4000, "linear",function(){
            images.last().after(images.first());
        });
    }, 4000);
}