1

我在使用 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 px（因为它在类 .position1 中定义）。现在，我为 div 设置动画，直到它的左边变成 400px。动画完成后，我addClass position2（左边是50px）和removeClass position1。

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

4

3 回答 3

2

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

于 2013-03-04T13:34:54.847 回答
0

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

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

于 2013-03-04T13:35:51.627 回答
0

您需要left从样式中删除内联，因为内联样式优先于 CSS 类：

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

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

演示

于 2013-03-04T13:38:27.390 回答