[解決済み】addClass/removeClassをjQueryでアニメーション化する。

質問

jQueryとjQuery-uiを使用していて、様々なオブジェクトの様々な属性をアニメーション化したいのですが、どうすればよいですか？

ここでは問題を説明するために、ユーザーがマウスを乗せると青から赤に変わる1つのdivに単純化しました。

を使用すると、必要な動作を得ることができます。 animate() しかし、そうすると、アニメーションを行うスタイルがアニメーション・コードに含まれていなければならず、スタイル・シートとは別に存在することになります。(参照 例1 )

別の方法として addClass() と removeClass() で得られるような正確な動作を再現できていません。 animate() . (参照 例2 )

例1

では、次のコードを見てみましょう。 animate() :

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

は、私が探しているすべての動作を表示します。

1. 赤と青の間で滑らかにアニメーションする。
2. ユーザーがマウスを素早く div の内外に移動させても、アニメーションの「オーバーキュー」が発生しないようにしました。
3. アニメーションの再生中にユーザーがマウスを移動させた場合、現在の「途中」状態と新しい「ゴール」状態の間で正しくイージングされます。

しかし、スタイルの変更は animate() そこでスタイルの値を変更しなければならず、自分のスタイルシートを指してもらうわけにはいかない。このように、スタイルが定義される場所が「断片化」していることが、私を悩ませているのです。

例2

以下は、私の現在の最善の試みです。 addClass() と removeClass (アニメーションを動作させるには、jQuery-uiが必要なことに注意してください)。

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

これは、私が最初に要求した性質1.と2.の両方を示していますが、3.はうまくいきません。

その理由はわかりました。

アニメーションの場合 addClass() と removeClass() jQuery は要素に一時的なスタイルを追加し、提供されたクラスの値に達するまで適切な値をインクリメントし、そのときだけ実際にクラスの追加/削除を行います。

そうしないと、アニメーションを途中で止めたときに style 属性が残ってしまい、クラスの値を永久に上書きしてしまうからです。タグの style 属性はクラスのスタイルよりも重要度が高いためです。

しかし、アニメーションが途中で終わってしまうと、まだ新しいクラスが追加されていないため、この解決策では、アニメーションが完了する前にユーザーがマウスを動かすと、色が前の色にジャンプしてしまいます。

理想を言えば、このようなことができるようになりたいのです。

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

ここで getClassContent は、提供されたクラスの内容を返すだけです。重要なのは、この方法ではスタイル定義をあちこちに置いておく必要がなく、スタイルシートのクラスで管理できることだ。

どうやって解決するの？

IEを気にしないのであれば、CSSのトランジションでアニメーションを提供し、jQueryでクラスを変更すればよいのではないでしょうか。実例です。 http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}