使用jQuery循環div元素

Question

我正在嘗試循環div元素，以連續方式成功循環了兩個div元素。 但是當我將代碼擴展到5個div時，循環並沒有擴展到所有div，並且動畫存在延遲。我已經將animate.css用於翻譯動畫

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

您的類.bottom應用的z-index存在問題。

實際上，您不應該在每個循環中都刪除該類，而應該僅在所有循環的末尾刪除該類。

這是我在您的代碼中所做的更改：

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

代替

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

這是更新的jsfiddle 。