jQuery的addClass（）removeClass（）

Question

我有jQuery方法.addClass（）.removeClass

的jsfiddle一个问题的方法：http://jsfiddle.net/HEM7Q/4/

$(document).ready(function() { 
    $(".button").click(function(e) { 
    $(".position1").animate({left:"400px"},2000, function(e){ 
    $(".position1").addClass("position2").removeClass("position1"); 
    }) 
    }); 
}); 

看到，最初，css.left是20像素（因为它在类.position1中定义）。现在，我动画div直到它的左边变成400px。动画完成后，我添加类位置2（其中左是50px）和我removeClass position1。

所以不应该在动画完成之后div回到左边== 50 px？ 为什么没有发生，它的正确的代码是什么？

Answer 1

我会说animate方法正在修改内联样式以获得所需的效果，即使动画完成时仍然存在（除非您主动恢复），并且这优先于您定义的样式类。

Answer 2

由于内联样式具有比外部样式更高的优先级。您可能需要将.position2中的left属性更改为left: 10px !imporant以强制使用属性值。

http://jsfiddle.net/HEM7Q/6/

Answer 3

您需要从风格删除内嵌left，如内嵌样式优先于CSS类：

$(".position1").animate({left:"400px"},2000, function(e){ 
    $(".position1").css("left",""); //Removing 'left' which was added by animation 

    $(".position1").addClass("position2").removeClass("position1"); 
}) 

DEMO