jquery - jQuery addClass を遅らせることはできますか?

Question

addClass()jQueryを遅らせる方法はありますか? たとえば、このコード

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass');

ページをロードすると、ID「sampleID」にクラス「aNewClass」がすでに含まれています。この問題を解決するには？私が欲しいのは、 addClass が終了した後に発生することfadeOut()です。

score 21 · Accepted Answer

addClass呼び出しを直接遅延させることはできませんが、このようなパラメーターとして関数を受け取るキュー呼び出しでラップする場合は遅延できます。

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')});

score 12 · Accepted Answer

私が望むのは、 addClass がfadeOut() を終了した後に発生することです。

$('#sampleID').fadeOut(500, function(){
  $(this).addClass('aNewClass');
});

score 1 · Accepted Answer

delayこれはエフェクトキューにのみ影響するため、これを行うことはできません。キューを使用して実装されていない場合、後のコードの実行は「一時停止」しません。

これを行う必要がありますsetTimeout：

$('#sampleID').delay(2000).fadeOut(500, function() {
    setTimeout(function() {
        $(this).addClass('aNewClass');
    }, 2000);
});

これはのcompleteコールバックを使用しfadeOut、関数を 2 秒後に実行するように設定します。

score 0 · Accepted Answer

コールバックを使用する必要があります。

$('#sampleID').delay(2000).fadeOut(500,function(){
   $(this).delay(2000).addClass('aNewClass');
});

score 0 · Accepted Answer

CSS transition で setTimeout を使用することもできます。

setTimeout(function() {
    $('#sampleID').addClass('aNewClass');
}, 2000);

そして、CSS

#sampleID {
transition: opacity 1s ease;
opacity: 0;
}

#sampleID.aNewClass {
opacity: 1;
}

5 に答える 5