I’m trying to implement a jQuery function with an infinite loop to animate a div. I can’t figure out how to do it. This is my code:
$(document).ready(function () {
$('#divers').animate({
'margin-top': '90px'
}, 6000).animate({
'margin-top': '40px'
}, 6000);
});
put the code that does the full animation into a function, then pass that function as the callback param to the last animation. Something like...
$(document).ready(function() {
function animateDivers() {
$('#divers').animate(
{'margin-top':'90px'}
,6000
)
.animate(
{'margin-top':'40px'}
,6000
,animateDivers //callback the function, to restart animation cycle
);
}
animateDivers(); //call, to start the animation
});
$(document).ready(function() {
function ani() {
$('#divers').animate({
'margin-top':'90px'
},6000).animate({
'margin-top':'40px'
},6000, ani); //call the function again in the callback
});
});
ani();
});
use the .animate()
callback to 'recall' your function:
$(function() {
function loop(){
$('#divers')
.animate({marginTop:90},6000)
.animate({marginTop:40},6000, loop); // callback
}
loop(); // call this wherever you want
});
Using setInterval is the way to go. Too much recursion will just get you "Stack Overflow" :-) "Uncaught RangeError: Maximum call stack size exceeded"
The animate()
function has an option to take a function to call when the animation ends. You could just do the same call, and voila.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With