javascript - Jquery css 函数在动画完成处理程序中不起作用

Question

这是js代码:

var index=0;
function reset(){
    for(var i=0;i<count+2;i++){
        $(imgs[i]).css("left",width*(i-1-index));
    }
}
reset();
//$(".dcCarousel").swipeleft(function(){
$("#left").click(function(){
    index = index+1;
    for(var i=0;i<count+2;i++){
        $(imgs[i]).animate({"left":width*(i-1-index)}, complete=function(){
            if(index>=count) {
                index = 0;
                //$(this).delay(0,reset);
                reset();
            }
        });
    }
});

第一次 reset 被调用，它被执行，左边的属性被赋予了正确的值。但是当我在 animate() 的完整处理程序中调用它时，左属性值仍然像动画之后一样。为什么是这样？以及如何解决这个问题？

顺便说一句，我正在实现的是一个圆形轮播。我克隆了头部和尾部 img 并将它们添加到 imgs 的末尾和开头，我希望在滚动到末尾并且动画结束后，我更改 css attr 以显示第一个 img。这种方法有什么问题吗？

请不要推荐其他轮播小部件，我需要自己编写。谢谢!

Answer 1

使用您当前的代码，您将运行许多动画，第一个完成的将尝试在其他动画运行时重置 css。未完成的动画将覆盖重置功能更改。

要解决这个问题，也许可以尝试类似的方法

var animationCount = 0;
var index=0;
function reset(){
    for(var i=0;i<count+2;i++){
        $(imgs[i]).css("left",width*(i-1-index));
    }
}
reset();
$("#left").click(function(){
    index = index+1;
    animationCount = count + 2;
    for(var i=0;i<count+2;i++){
        $(imgs[i]).animate({"left":width*(i-1-index)}, complete=function(){
            if ( index >= count ) {
                animationCount -= 1;
                if ( animationCount == 1 ) {
                    index = 0;
                    reset();
                }
            }
        });
    }
});