How do i run the .animate function in jQuery forever?
-
05-07-2019 - |
Question
$(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?
Solution
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);
OTHER TIPS
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!