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 时，它被执行，left 属性被分配了正确的值。但是当我在 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();
                }
            }
        });
    }
});

Answer 2

index = index+1;
    for(var i=0;i<count+2;i++){

一定喜欢这个

for(var i=0;i<count+2;i++){
  index = index+1;