如何使jQuery无限循环

Question

这是我的jquery代码。此代码包含三个函数。这三个函数反复执行以循环执行。但是此代码无法正常运行。如何使用三个函数进行递归调用。pid1，pid2，pid3是段落标签id。制作文字动画。

$(document).ready(function(){
 function animate() 
   {    
     $('#pid1').fadeOut(3000, function()
    {
     $(this).text('string1').fadeIn(3000);
    }); 
    animate1();
   }
 function animate1()
  {
   $('#pid2').fadeOut(3000, function()
   {
   $(this).text('string2').fadeIn(3000);
   });
   animate2();
  }
function animate2() 
  {
   $('#pid3').fadeOut(3000, function()
   {
   $(this).text('string3').fadeIn(3000);
   });      
   animate();   
  }
  });

Answer 1

尝试这样：

$(document).ready(function(){
    function animate() {    
        $.when($('#pid1').fadeOut(3000, function() {
            $(this).text('string1').fadeIn(3000);
        })).then(function() {
            animate1();
        });
    }
    function animate1() {
        $.when($('#pid2').fadeOut(3000, function() {
            $(this).text('string2').fadeIn(3000);
        })).then(function() {
            animate2();
        });
    }
    function animate2() {
        $.when($('#pid3').fadeOut(3000, function() {
            $(this).text('string3').fadeIn(3000);
        })).then(function() {
            animate();
        });
    }
    animate();
});

这是一个jsFiddle： http : //jsfiddle.net/Pascalz/CNRSd/

Answer 2

在确保该元素具有淡入淡出之后，必须再次调用该函数。 您应该使用淡出回调函数

改变你的职能是这样的：

 function animate() 
 {    
     $('#pid1').fadeOut(3000, function()
     {
        $(this).text('string1').fadeIn(3000, function(){animate(); });
     }); 
 } 

Answer 3

这是使用回调函数的jsbin链接

通过使用回调进行动画