jQuery slide tittle stops before end his cycle

Question

Slide titles stops not completing the cycle. What's missing in code to complete my slide?

<div id="overflow-animate">
    <div id="animate-container">
        <h1 class="giga remove-bottom">title1</h1>
        <h1 class="giga remove-bottom">title2</h1>
        <h1 class="giga remove-bottom">title3</h1>
        <h1 class="giga remove-bottom">title4</h1>
        <h1 class="giga remove-bottom">title5</h1>
    </div>
</div>

jQuery:

//SET DELAY TO MODIFY THE DELAY OF THE INTRO ANIMATION
//INTRO ANIMATION
var delay = 1200;
var titleheight = $('#animate-container h1').outerHeight();
var count = $('#animate-container').height() / titleheight;

for (var i = 0; i < count; i++) {
    var distance = titleheight * i;
    $('#animate-container').delay(delay).animate({'top': '-' + distance + 'px'}, 400, 'easeOutBounce');
}

$('#animate-container').delay(800).animate({'top': '0px'}, 500, 'easeOutBounce');

if ($(".home .cover i").length > 0 && $(window).width() > 767) {
    $('.home .cover i').delay((count * delay) + (delay * 2)).animate({'top': $('.cover i').offset().top - 180}, 500, 'easeOutBounce', function() {
        //$('.cover h3').fadeIn(500);
    });
}
//END WINDOW ANIMATION

http://jsfiddle.net/YH5QV/5/

Answer 1

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/