バックグラウンドグローを作成するためのjqueryループ

Question

要素のグローを連続的に作成するループを実行しています。

function fb_glow() { 
    $('#dev_fb_image').delay(4000).animate({'background-color':'#4065b4'},2000).animate({'background-color': 'white'},2000); 
    fb_glow(); 
} 

fb_glow() 

私はこの関数の最後に関数を呼び出してループしていますが、以下の残りのjqueryを無効にしています。しかし、私はこれが何をするかではないと思います。どこが間違っていたのですか？バックグラウンドを連続的に作る簡単な方法はありますか？

Answer 1

1つのアニメーションを実行するのに約8秒かかるようです。

setInterval(
    fb_glow, 
    8000 //-> or 9000 miliseconds to make sure you don't have any overlap. 
); 

setInterval不定ループを作るごとに8000ミリ秒（または8秒）fb_glow呼び出します。

---

また、あなたfb_glow機能のfb_glow();内部を取り除きます。

function fb_glow() { 
    $('#dev_fb_image').delay(4000).animate({'background-color':'#4065b4'},2000).animate({'background-color': 'white'},2000); 

} 

jQueryのアニメーションは、非同期関数でsetInterval/setTimeoutに基づいています。つまり、fb_glow()が即座に呼び出され、アニメーションが終了するのを待つことはありません。

---

jQueryには、.done()機能もあります。あなたはそれが動作するかどうかを確認する必要があります。私は結果を混在させました。

function fb_glow() { 
    $('#dev_fb_image') 
     .delay(4000) 
     .animate({'background-color':'#4065b4'},2000) 
     .animate({'background-color': 'white'},2000) 
     .done(fb_glow); 
} 

done（あなたは...このためsetIntervalを使用しないでください）型：Function（プロミスアニメーション、ブールjumpedToEnd） 機能要素のアニメーションが（その プロミスオブジェクトを完了したときに呼び出されます解決される）。 （バージョンが追加されました：1.8）

Answer 2

fadeIn、fadeOutエフェクトで背景色を変更するクラスを追加および削除します。

// $.addClass("glow"); 
// $.removeClass("glow"); 

var glow = false; 
var glowInterval = setInterval(function(){ 
    if(glow == true){ 
     glow = false; 
     $('#dev_fb_image').removeClass("glow"); 
    } 
    else { 
      glow = true; 
      $('#dev_fb_image').addClass("glow"); 
    } 
},6000); 

CSS：

.glow { 
    background-color: green; 
    transition: background-color 2s; 
    -webkit-transition: background-color 2s; 
}