jQuery addClass()removeClass()方法

时间:2013-03-04 13:32:17

标签: javascript jquery

我遇到了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? 为什么它没有发生,它的正确代码是什么?

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分: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");
})

DEMO