javascript - 使用jquery循环div元素

Question

我正在尝试循环 div 元素，我成功地以连续的方式循环了两个 div 元素。但是当我将代码扩展到五个 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

在您的类(class) .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 .