Question

我遇到了jQuery方法的问题.addClass（）。removeClass

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

看，最初css.left是20 px（因为它在类.position1中定义）。现在，我动画div直到它的左边变成400px。动画完成后，我将addClass position2（左边是50px）和removeClass position1。

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

Answer 1

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

Answer 2

因为内联样式的优先级高于外部样式。您可能希望将left中的.position2属性更改为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

jQuery addClass（）removeClass（）方法

3 个答案: