CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Underscore Elven
Underscore Elven

Reputation: 63

Looping div elements using jquery

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));
    });
});

Upvotes: 0

Views: 93

Answers (1)

Yoann
Yoann

Reputation: 3060

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.

Upvotes: 3

Related Questions