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 で定義されているため)。ここで、左が 400px になるまで div をアニメーション化します。アニメーションが完成したら、Class position2 (左は 50px) を追加し、Class position1 を削除します。

アニメーションの完了後、divは左== 50 pxに戻るべきではありませんか? なぜそれが起こらないのですか?それに対する正しいコードは何ですか?

4

3 に答える 3

2

このanimateメソッドは、アニメーションが完了した場合でも（アクティブに元に戻さない限り）存在し続ける目的の効果を得るためにインラインスタイルを修正しており、これは定義されたスタイルクラスよりも優先されます。

于 2013-03-04T13:34:54.847 に答える
0

インライン スタイルは外部スタイルよりも優先されるためです。プロパティ値の使用を強制するために、leftプロパティを に変更することができます。.position2left: 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 に答える