jQuery addClass() removeClass() 方法答案

【问题标题】：jQuery addClass() removeClass() methodsjQuery addClass() removeClass() 方法
【发布时间】：2013-02-18 14:40:07
【问题描述】：

我在使用 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。动画完成后，我addClass position2（左边是50px），我removeClass position1。

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要从样式中删除内联 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

【讨论】：

【解决方案2】：

因为内联样式的优先级高于外部样式。您可能希望将.position2 中的left 属性更改为left: 10px !imporant 以强制使用该属性值。

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

【讨论】：

嗯，这有帮助。非常感谢，伙计！

【解决方案3】：

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

【讨论】：

是的，我明白了！非常感谢