jqueryのCSSの変更を遅らせる

Question

私はdivのオレンジの境界を作るコードを書いていますし、2〜2回黒に変更した後に実際に起こっていることは、ありがとう！

コード：

$('#newMessage1').css('border','2px solid #ffa800').delay(100).css('border','2px solid #000000'); 

Answer 1

jQueryのdelay機能のみfxキュー（fadeInまたはslideDownのような関数）に追加された機能で動作します。 cssは、これらの関数の1つではありません（他の非fxキューに対応する関数delayを試してください。どちらも機能しません）。 docsから

：

バージョン1.4でのjQueryに追加

、.delay（）メソッドは、私たちは、キューにそれに従うの機能 実行を遅延することができます。 標準エフェクトキューまたはカスタムキューを使用できます。キュー内の次のイベントだけが遅延されます（ ）。例えば、 は、 エフェクトキューを使用しない.show（）または.hide（）の引数なしのフォームを遅延させません。

jQueryのdelayは、この場合には、おそらく行くための方法だろうネイティブJS setTimeout、に代わるものではありません。あなたは、例えば、この（実施例here）のような何かができる：アニメーションがあるように、CSSの変更が影響キューに置かれていないよう

$('#newMessage1').css('border','2px solid #ffa800'); 

setTimeout(function() { 
    $("#newMessage1").css('border','2px solid #000000'); 
}, 1000); 

Answer 2

あなたはcss()とdelay()を使用することはできません。

代わりに、あなたはsetTimeoutを使用する必要があります：

$('#newMessage1').css('border','2px solid #ffa800'); 
setTimeout(function() { $('#newMessage1').css('border','2px solid #000000'); }, 1000); 

編集：境界線の色をアニメーション化するには、jQueryのUIのコアを含む、あなたが独立して境界線の各側面をアニメーションを確認する必要があります。あなたはこれを行う方法の例を見ることができますhere。

Answer 3

なぜ、Jqueryで.animate（）を使用しないのですか？ ただ、デフォルトのボーダーのためのあなたのCSSを設定します。

yourIDまたはクラス { ボーダー：2ピクセル固体＃ffa800。 }

そして、あなたのjQueryで：

$（ "＃yourID"）（{ '国境'： '＃000000'}、3000）をアニメーション化。 < ----最後のパラメータはあなたの遅延= 3秒です

Answer 4

@ James-Allardiceと@ Luke-BennetはデフォルトでCSSの変更がfxキューに追加されていないのは正しいですが、理由はありませんそこに置く。

.queue() methodの2番目の形式では、キューに何かを追加できます。標準fxキューを使用する必要もなく、独自のキューを作成することもできます。

がありjQueryのドキュメントのページにいくつかの良い例ですが、ここでは特定のニーズを解決する一つだ：

$("#newmessage1").queue(function(){ 
    $(this).css("border", "2px solid #ffa800"); 
    $(this).dequeue(); 
}); 
$("#newmessage1").queue(function(){ 
    $(this).delay(500); 
    $(this).css("border", "2px solid black"); 
    $(this).dequeue(); 
} 

それは醜いと洗練さだが、それはsetTimeoutを使用してより良いかもしれません。

@ BorisDが推奨するように、.animate() methodを使用することをお勧めします。あなたがあなたの元の例で指定された「100」は第二の唯一の10分のこと

$("#newmessage1").css("border", "2px solid #ffa800"); 
$("#newmessage1").animate({"border": "2px solid black"}, 500); 

注：あなたは、組み込みの必要な機能を持っています。私の例では0.5秒です。