JQuery .each() loop 继续循环

Question

我有一个 jQuery .each() 循环，我想继续循环。在我目前的 fiddle 中，它循环，重新开始，但我似乎无法为各种 li 的时间安排正确的时间。无论有多少列表项，我都希望这个循环能够正常工作。

// 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() 让你指定一个回调 jQuery 将在淡入淡出完成时调用以触发下一个元素的动画。（请注意，您可能不再需要 message-last class 但我已将该代码留在其中。）

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() loop 继续循环

JQuery .each() loop continue looping

each

jquery