jquery - 顺序 addClass 循环 (jQuery)

Question

所以我的页面上有 5 个连续的 div。我正在使用 jQuery Waypoints添加一个类，is-active 到第一个，这改变了它的外观。然后我希望有一个延迟，比如 1 秒，当它添加到下一个时，然后是 1 秒之后，下一个，依此类推。这是我的代码:

<div class="five-step-waypoint"></div>
<div class="steps">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
</div>

和我的 jQuery:

$(document).ready(function() {
    $.fn.wait = function( ms, callback ) {
        return this.each(function() {
            window.setTimeout((function( self ) {
                return function() {
                    callback.call( self );
                }
            }( this )), ms );
        });
    };

    $('.five-step-waypoint').waypoint(function() {
        $(".step:first-child").addClass("is-active");
         $.each($(".step").wait(1000, function() {
             $(this).addClass("is-active");
         }));
    }, {
        triggerOnce: true
    });
});

注意:我从 here 获得了“等待”功能.如果您能做得更好，请随意修改或完全删除它。

我遇到的问题是第一个 .step 添加了 .is-active，观察到 1 秒的延迟，但随后 .is -active 被同时添加到其他 4 个 .step 中。我需要它逐一添加 .is-active。此外，如果它可以循环(这样当每个 .step 都有 .is-active 时，它会清除所有 .is-active 并且再次回到起点)那太好了!

感谢任何人给我的帮助!我也写了一个jsfiddle供您测试内容。为了简化操作，我省略了 Waypoints 内容。

Answer 1

问题是等待会同时应用于所有步骤元素。要获得交错等待，一种常见的技术是使用一个函数来执行工作的一个步骤，并使用 setTimeout 安排将来对自身的另一个调用:

$('.five-step-waypoint').waypoint(function() {
    var children = $(".step");
    var index = 0;

    function addClassToNextChild() {
        if (index == children.length) return;
        children.eq(index++).addClass("is-active");
        window.setTimeout(addClassToNextChild, 1000);
    }

    addClassToNextChild();
}, {
    triggerOnce: true
});

See updated fiddle .