web-dev-qa-db-ja.com

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()と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属性はクラススタイルよりも重要性が高いため、style属性が残り、クラス値を永久に上書きします。

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

私が理想的に欲しいのは、このようなことができるようになることです。

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

getClassContentは与えられたクラスの内容を返すだけです。重要な点は、このようにしてスタイル定義をあちこちに保存する必要はなく、それらをスタイルシートのクラスに含めることができるということです。

javascriptjquerycssjquery-uijquery-animate
213
Johannes

あなたはIEについて心配していないので、クラスを変更するためにアニメーションとjQueryを提供するために単にcss遷移を使わないでください。実例： 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;
}
294
tw16

別の解決策（しかしコメントでRichard Neil Ilaganによって指摘されたようにそれはjQueryUIを必要とする）： -

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

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

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

89
Omar Tariq

あなたはjqueryのui switchClass を使うことができます。

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

またはこちら jsfiddle をご覧ください。

37
by0

追加期間を有効にするには、jQuery UI effects-core（13KB）が必要です。

12
Patrick

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

これは私がやってしまったものです：

//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秒かけてゆっくりと通常の色に戻ります。

これが なぞなぞです

4
Tj Gienger

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

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

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

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

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

2
Anurag