jquery - 背景画像を変更するjQuery関数ループでFirefoxがクラッシュする

Question

背景画像をフェードインしてアウトしたい。

背景を画像に設定して、2 つの div を重ね合わせています。

私のjQueryでは、1つのdivをターゲットにしてから、不透明度をゼロにしてもう1つを表示します。それから私は逆をします。ただし、これは機能していましたが、何らかの理由でこの無限ループが Firefox をクラッシュさせます。

クラッシュしないようにするにはどうすればよいですか？

             $(document).ready(function() {
                function change (){
                  $('#back1').animate({opacity:0}, {duration:3000});
                  $('#back1').delay(1000);
                  $('#back1').animate({opacity:1},  {duration:3000});
                  $('#back1').delay(1000);
                  change();

                }

                change();

            });

Answer 1

問題は、アニメーションが完了する前に呼び出しchange()ているため、競合状態が発生していることです。アニメーションは非同期です。アニメーションには、使用できる完全なコールバックがあります。

これを試して：

function change (){
     $('#back1').animate({opacity:0}, {duration:3000}) 
                .delay(1000)
                .animate({opacity:1},  {duration:3000}, function(){
                      /* use complete callback of final animation to start sequeunce again*/
                      change();
                 });                  

}

Answer 2

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