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();
            }
        });
    }
});

第一次调用重置时，执行该重置，左侧属性已分配正确的值。但是当我在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;

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

2 个答案: