jquery动画第一次触发，但在更改类之后不会触发

Question

下面的动画在第一次调用函数时完全按照我的需要工作，但在函数更改类后，当您调用函数时，只有不透明度动画才能工作，左侧的幻灯片甚至没有尝试执行。我是Jquery的新手，所以我不确定是什么原因导致一个动画不起作用，而另一个效果很好。。。任何提示都将不胜感激。这个例子可以在www.digitalbrent.com/lab上找到——点击填充，然后点击减少。

function slider_minus(){
    $('.left_slot').animate({
        left: '50px'        //only works on first function call
    },300);
    $('.middle_slot').animate({
        left: '50px'        //only works on first function call
    },300, function(){
         $('.middle_slot').attr('class','right_slot')
         $('.left_slot').attr('class','middle_slot')
    });
    $('.right_slot').animate({
        opacity: 0,         //works correctly every time
        left: '50px'        //only works on first function call
    },300);
}

Answer 1

因为您正在设置left:50px，所以它在还剩50像素时看起来不会动画化。

尝试

left: "+=50"

这将导致您的div每次被调用时都向左移动50个像素，无论它现在在的哪个位置