CODEWITHSUNDEEP
javascriptjqueryhtml
nmkkannan
nmkkannan

Reputation: 1303

how to make jquery infinite loop

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

Upvotes: 0

Views: 1060

Answers (3)

surajRahel
surajRahel

Reputation: 266

Here is the link of jsbin by using callback functions

animate by using callback

Upvotes: 0

Pascalz
Pascalz

Reputation: 2378

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/

Upvotes: 2

Azadeh Radkianpour
Azadeh Radkianpour

Reputation: 971

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

Upvotes: 1

Related Questions