jQueryでaddClass / removeClassをアニメーション化する
私は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}); }); それは私が探しているすべての行動を表示します： 赤と青の間をスムーズにアニメーション化します。 ユーザーがマウスをdivの内外にすばやく移動しても、アニメーションは「オーバーキュー」しません。 アニメーションの再生中にユーザーがマウスを出し入れすると、現在の「途中」状態と新しい「目標」状態の間で正しく緩和されます。 ただし、スタイルの変更はで定義されanimate()ているので、そこでスタイル値を変更する必要があり、スタイルシートをポイントすることはできません。スタイルが定義されている場所のこの「断片化」は、本当に私を悩ませるものです。 例2 addClass()and を使用した私の現在の最善の試みは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は一時的なスタイルを要素に追加し、提供されたクラスの値に達するまで適切な値をインクリメントします。その後、実際にクラスを追加/削除します。 このため、スタイル属性を削除する必要があります。そうしないと、アニメーションが途中で停止した場合、スタイル属性が残り、タグのスタイル属性がクラススタイルよりも重要であるため、クラス値が永久に上書きされます。 ただし、アニメーションの途中で新しいクラスが追加されていないため、このソリューションでは、アニメーションが完了する前にユーザーがマウスを動かすと、色が前の色にジャンプします。 私が理想的に望んでいるのは、次のようなことができるようになることです。 $('#someDiv') .mouseover(function(){ …