Looping div elements using jquery

Question

I am trying to loop div elements, I was successful in looping two div elements in continuous manner. But when i extended the code to five divs the loop isn't extending to all the divs and there is an delay in the animation.I have used animate.css for the translation animation

jsFiddle- http://jsfiddle.net/e62m6hfn/7/

jQuery

function animate($el) {
    $el.addClass('animated  lightSpeedOut');
}

var elCounter = 0;

$(document).ready(function () {
    elCounter = $('.s-animate').length;
    animate($('.s-animate').eq(elCounter - 1));

    $('.s-animate').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd   oanimationend animationend', function () {
        elCounter = (elCounter > 1) ? elCounter - 1 : $('.s-animate').length;
        $('.s-animate').removeClass('bottom');
        $(this).addClass('bottom');
        $(this).removeClass('animated  lightSpeedOut');
        animate($('.s-animate').eq(elCounter - 1));
    });
});

Answer 1

There is a problem with your z-index applied in your class .bottom .

In fact you shouldn't remove the class at each loop, but instead, only at the end of all loops.

Here what I've changed in your code :

elCounter = elCounter - 1;
$(this).addClass('bottom');
if (elCounter <= 0) {
    $('.bottom').removeClass('bottom');
    elCounter = $('.s-animate').length;
}

instead of

elCounter = (elCounter > 1) ? elCounter - 1 : $('.s-animate').length;
$('.s-animate').removeClass('bottom');
$(this).addClass('bottom');

Here is the updated jsfiddle .