0

所以我的页面上连续有 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
    });
});

注意：我从这里获得了“等待”功能。如果您可以做得更好，请随意修改或完全删除它。

我遇到的问题是第一个.step已.is-active添加到它，观察到 1 秒延迟，但随后一次全部.is-active添加到其他 4秒。.step我需要它来.is-active一一添加。此外，如果它可以循环播放（这样当每个.step都有s 时.is-active，它会清除所有.is-actives 并再次返回开头），那就太好了！

感谢任何人给我的任何帮助！我还为您编写了一个jsfiddle来测试内容。我省略了 Waypoints 的内容以使其更容易。

4

1 回答 1

2

问题是等待立即应用于所有步骤元素。要获得交错等待，一种常见的技术是使用一个函数来执行工作的一个步骤，并用于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
});

请参阅更新的小提琴。

于 2013-09-09T09:54:20.210 回答