Tutorial :How do i run the .animate function in jQuery forever?


$(this).css("left","100px");    function endless(){      $(this).animate({          left:'-=100px',      },{          easing: "linear",      duration: 5000,      complete: function() {          $(this).css('left','100px');      endless();          }      });  };  endless();  

This is what I tried, but using this approach i can't get stuff moving. Im' using jQuery 1.3.2. Any Suggestions?


You have the parameters to animate wrong. It doesn't take an options hash, just the actual options for easing, duration, and a callback. Also, you need to take care when using this. Better to pass it in as an argument to the endless function.

$(this).css("left","100px");    function endless(elem){      $(elem).animate(          { left:'-=100px' },          "linear",          5000,          function() {              $(elem).css('left','100px');              endless(elem);          }       );  };  endless(this);  


You'll need to call endless() from within a callback.

function endless(item) {    $(item).animate({"left": "-=100px"}, 5000, "linear", function(){      $(item).css("left","100px");      endless(item);    });  }    endless($(".myBox"));  


You need to replace $(this) with the selector to element that you want to animate.


Great! this is exactly what i searched for, but now,

i finally figured how to toggle it. with the following function, call endless(0) to stop, and endless(1) to enable animation loop.

//loop animation forever  //args: takes 1 to loop, 0 to stop  function endless(loop)  {     //animate forever    if (loop==1)    {   $('#alink').animate(    {'opacity':'toggle'},     1000,      function () { endless(1) }    );     }    //stop animation    else    {   $('#alink').css('opacity',1).stop();    }    };       //sample call  $('#alink').toggle(function(){ endless(1) },function(){ endless(0) });  

thanx for initial code!

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »