jquery - jQuery函数循环改变背景图像崩溃firefox

Question

我想要一个背景图像淡入淡出。

我有两个相互重叠的 div，背景设置为图像。

在我的 jQuery 中，我以一个 div 为目标，然后将不透明度设为零，显示另一个。然后我做相反的事情。但是，这是可行的，但现在由于某种原因，这个无限循环使 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

您必须使用函数的回调