Reputation: 195
i have these scrip that i need to loop:
$(document).ready(function() {
runIt();
})
function resets()
{
$('.grower').removeAttr("style");
}
function runIt()
{
$('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets);
}
but when i add the runIt(); inside it self so it can loop, it loops but my browser goes blank and i will not respond. how can i do it so it will loop that animation.
thanks in advance
Upvotes: 2
Views: 15415
Reputation: 220136
No need to query the DOM constantly. Store the $('.grower')
in a variable:
$(document).ready(function() {
var $grower = $('.grower');
function runIt() {
$grower.animate({
width: "30px",
height: '30px',
left: "-6",
top: "-6",
opacity:"0"
}, 800, function() {
$grower.removeAttr("style");
runIt();
});
}
runIt();
});
Here's the fiddle: http://jsfiddle.net/jC8Js/
Update: If you want it to pause before each cycle, use a timer:
setTimeout(runIt, 1000);
Here's the fiddle: http://jsfiddle.net/jC8Js/1/
Alternatively, you could just run all of it with an interval timer:
$(document).ready(function() {
var $grower = $('.grower');
setInterval(function() {
$grower.animate({
width: "30px",
height: '30px',
left: "-6",
top: "-6",
opacity:"0"
}, 800, function() {
$grower.removeAttr("style");
});
}, 1500);
});
Here's the fiddle: http://jsfiddle.net/jC8Js/2/
Upvotes: 9
Reputation: 13467
$(document).ready(function() {
runIt();
})
function resets()
{
$('.grower').removeAttr("style");
runIt();
}
function runIt()
{
$('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets);
}
Upvotes: 1