This should solve your problem:
var container = $('#animate-container'),
gigaH1 = container.find('h1'),
titleHeight = gigaH1.height() + parseInt(gigaH1.css('margin-top'), 10);
(function animateH1() {
for (var i = 0; i < gigaH1.length; i++) {
container.delay(1200).animate({
'top': '-' + titleHeight * i
}, 400, 'easeOutBounce');
}
container.delay(800).animate({ 'top': 0 }, 500, 'easeOutBounce', animateH1);
}());
CSS:
#animate-container {
position: relative;
float: left;
top: 0;
}
#overflow-animate {
overflow: hidden;
height: 79px;
}
First off the code caches some variables (container
, gigaH1
) as they aren't going to change every time the function is run. It then calculates the offset required to move each H1 out of view.
The function below is self-invoking and simply runs your original code (with a few minor tweaks). The last animation has the animateH1()
function itself as a callback so the whole animation is run again once it's complete.
Here it is working: http://jsfiddle.net/wAaeD/