我遇到了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? 为什么它没有发生,它的正确代码是什么?
答案 0 :(得分:2)
我会说animate
方法正在修改内联样式以获得所需的效果,即使动画完成(除非你主动恢复),它仍然存在,并且这优先于你定义的样式类。 / p>
答案 1 :(得分:0)
因为内联样式的优先级高于外部样式。您可能希望将left
中的.position2
属性更改为left: 10px !imporant
,以使用属性值强制执行。
答案 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");
})