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

顺序addClass循环（jQuery）

1 个答案: