jQuery repeat animations within functions -
i have simple flash animation trying rebuild jquery. have 5 animations chained start 1 after another. after animations fire, need pause 5 seconds, clear , begin animation again. need do indefinitely. here code:
$(".bars").ready(function() { $(".barone").animate({ 'height': '49px' }, 2000, function() { $(".bartwo").animate({ 'height': '112px' }, 2000, function() { $(".barthree").animate({ 'height': '174px' }, 2000, function() { $(".barfour").animate({ 'height': '236px' }, 2000, function() { $(".barfive").animate({ 'height': '298px' }, 2000, function() { $('.bars div').delay(5000, function() { $('.bars div').css({ "height": "0" }); }); }); }); }); }); }); }); please forgive source formatting, text field not agreeing me.
you can see example at: http://execusite.com/fazio/files/careers-banner/test.html
any appreciated
would correct then?
function animatethis(){ $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {
$('.bars div').delay(2000).css({"height" : "0"}), function() { animatethis()}; }); }); });
}); }); } $(".bars").ready(function(){animatethis()});
i apologize ignorance, new jquery , still trying grasp syntax.
place code in function. when last animation happens, fire off function again. use chained .delay(5000) pause 5 seconds
sudo code:
function myanimate(){ ...your code.delay(5000).animate(....function(){ myanimate() }) }
Comments
Post a Comment