Question

我有一个jQuery .each（）循环，我想继续循环。在我目前的小提琴中，它会循环播放，从一切开始，但我似乎无法为各种数量的时间获得正确的时机。无论有多少列表项，我都希望这个循环能够工作。

// add class first to first li
$('.js-ifeature li').first().addClass('message-first js-selected');

// add class last to last li
$('.js-ifeature li').last().addClass('message-last');

//set height
$('.js-ifeature').css('height', $('.js-ifeature li').height()+'px');

var time = 1000;
var alltheitems = $('.js-ifeature li').size();

function eachChange(){
    $('.js-ifeature li').each(function(i) {
        $(this).hide();
        $(this).delay(time * i).fadeIn(time).fadeOut(time);
        if ($(this).hasClass('message-last')) {
            setTimeout(eachChange, (alltheitems) * time);
        }
    });
}
eachChange();

Answer 1

对于多个元素之间的这种时序，.each()循环有点笨拙。即使它现在有效，如果您决定在单个动画中添加额外的步骤，它也会破裂。我会摆脱它并做这样的事情：

var time = 1000,
    current = 0,
    $lis = $('.js-ifeature li').hide(); // hide them all to start

$lis.first().addClass('message-first js-selected'); // add class first to first li
$lis.last().addClass('message-last'); // add class last to last li
$('.js-ifeature').css('height', $lis.height()+'px');

function eachChange(){
    $lis.eq(current).fadeIn(time).fadeOut(time, eachChange);
    current = (current + 1) % $lis.length;
}
eachChange();

演示：https://jsfiddle.net/ewsQ7/1664/

也就是说，让你的函数只为“current”元素设置动画，通过current变量进行跟踪，并使用.fadeOut()允许你指定jade在淡入淡出时调用的回调这一事实完成以触发下一个元素的动画。（请注意，您可能不再需要message-last类，但我已将该代码留在其中。）

Answer 2

对于不那么常用的shift方法，这是一个方便的情况。但是由于jQuery集合不是数组而是类似于数组的对象，所以你必须将shift方法填充到jQuery上：

此外，你应该等到fadeOut完成之后再进行下一次调用，因为浏览器可能会被阻塞，你最终会得到一堆动画......这不好。

http://jsfiddle.net/xwuo9cpy/2/

var $featue = $('.js-ifeature'),
    $items = $featue.find('li'),
    time = 1000;

//set height
$featue.css('height', $items.first().height()+'px');
$items.hide();

// shim the shift method
$.fn.shift = Array.prototype.shift;

!function eachChange(){
    var item = $items.shift();
    $(item).fadeIn(time).fadeOut(time, eachChange);
    $items.push(item);
}();

JQuery .each（）循环继续循环

2 个答案: