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});
  });

それは私が探しているすべての行動を表示します：

1. 赤と青の間をスムーズにアニメーション化します。
2. ユーザーがマウスをdivの内外にすばやく移動しても、アニメーションは「オーバーキュー」しません。
3. アニメーションの再生中にユーザーがマウスを出し入れすると、現在の「途中」状態と新しい「目標」状態の間で正しく緩和されます。

ただし、スタイルの変更はで定義され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(){
    $(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;
}

別の解決策（ただし、コメントでRichard Neil Ilaganが指摘したjQueryUIが必要です）：-

addClass、removeClass、toggleClassも2番目の引数を受け入れます。ある状態から別の状態に移行するまでの時間。

$(this).addClass('abc',1000);

jsfiddleを参照してください： - http://jsfiddle.net/6hvZT/1/

jquery ui'sを使用できます。switchClassここに例を示します。

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

または、このjsfiddleを参照してください。

追加の期間を有効にするには、jQuery UIエフェクトコア（13KB）が必要です（Omar Tariqが指摘したように）

私はこれを調べていましたが、インとアウトで異なる遷移率を持ちたいと思っていました。

これは私がやったことです：

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

これにより、背景色がすぐに＃5eb4fcに変わり、その後2秒かけてゆっくりと通常の色に戻ります。

ここにフィドルがあります

質問はかなり古いですが、他の回答にはない情報を追加しています。

OPは、イベントが完了するとすぐに、stop（）を使用して現在のアニメーションを停止します。ただし、関数でパラメーターを適切に組み合わせて使用​​すると、問題が解決するはずです。例えば。キューに入れられたアニメーションに影響を与えるため、stop（true、true）またはstop（true、false）。

次のリンクは、stop（）で使用可能なさまざまなパラメーターと、finish（）との違いを示すデモを示しています。

http://api.jquery.com/finish/

OPはJqueryUIを使用しても問題はありませんでしたが、これは、同様のシナリオに遭遇する可能性があるがJqueryUIを使用できない/ IE7と8をサポートする必要がある他のユーザー向けです。