how to make jquery infinite loop

Question

this is my jquery code.this code contain three functions.this three function repeatedly execute for looping.but this code not run properly.how to make recursive call with three functions.the pid1,pid2,pid3 is paragraph tag id's.this code used to make text animation.

$(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

try like this :

$(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();
});

Here a jsFiddle : http://jsfiddle.net/Pascalz/CNRSd/

Answer 2

You must call the function again after making sure that element has fadeout. You should use fadeout callback functions

change you function like this:

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

Answer 3

Here is the link of jsbin by using callback functions

animate by using callback