0

好的，所以我显然在这里遗漏了一些东西。我知道这又回到了同步/异步的事情上，但我想不通。

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

滑块的一般逻辑如下所示：

默认状态：有一堆图像彼此相邻浮动，延伸到视口边缘：（哈希符号是视口）

# [ 图像 1 ] [ 图像 2 ] # [ 图像 3 ]

我使用 animate 给 IMAGE-1 一个负边距，将其拉出视口。

[ 图像 1 ] # [ 图像 2 ] [ 图像 3 ] #

然后我会将 IMAGE-1 移动到序列的末尾，将其边距设置回 0，然后再做一次。

# [ 图像 2 ] [ 图像 3 ] # [ 图像 1 ]

所以我的问题是，IMAGE-1 在动画结束之前被移到序列的末尾。我假设正在发生的事情是“动画”功能和移动 image-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);
}

提前致谢。

4

1 回答 1

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);
}
于 2013-06-18T19:15:08.130 回答