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

jsfiddle.net/MJz78

dfsq
– dfsq

2014-04-13 07:56:08 +00:00
Commented Apr 13, 2014 at 7:56 — dfsq
– dfsq, Commented Apr 13, 2014 at 7:56

Pascalz · Accepted Answer · 2014-04-13 07:51:07Z

2

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/

answered Apr 13, 2014 at 7:51

Pascalz

2,3581 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Azadeh Radkianpour · Accepted Answer · 2014-04-13 07:49:10Z

1

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

answered Apr 13, 2014 at 7:49

Azadeh Radkianpour

9709 silver badges19 bronze badges

Comments

surajRahel · Accepted Answer · 2014-04-13 08:59:56Z

0

Here is the link of jsbin by using callback functions

animate by using callback

answered Apr 13, 2014 at 8:59

surajRahel

2661 silver badge4 bronze badges

Collectives™ on Stack Overflow

how to make jquery infinite loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related