所以我的页面上有 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 内容。
最佳答案
问题是等待会同时应用于所有步骤元素。要获得交错等待,一种常见的技术是使用一个函数来执行工作的一个步骤,并使用 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
});
关于jquery - 顺序 addClass 循环 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18695137/