我正在使用以下代码通过 jQuery Waypoints 插件触发一系列 CSS 动画。我有 50 个这样的 div，需要将类“frame-on-1”、“frame-on-2”、“frame-on-3”、“frame-on-4”添加到一组 div 中命令。我的代码可以运行，但远谈不上优雅，我知道必须有一种更简单的方法来做到这一点:
$('#panel4').waypoint(function(direction) {
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(27)').addClass("frame-on-1");
}
}, 100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(27)').addClass("frame-on-2");
}
}, 200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(27)').addClass("frame-on-3");
}
}, 300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(27)').addClass("frame-on-4");
}
}, 400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-1");
}
}, 500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-2");
}
}, 600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-3");
}
}, 700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-4");
}
}, 800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-1");
}
}, 900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-2");
}
}, 1000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-3");
}
}, 1100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(28)').addClass("frame-on-4");
}
}, 1200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(29)').addClass("frame-on-1");
}
}, 1300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(29)').addClass("frame-on-2");
}
}, 1400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(29)').addClass("frame-on-3");
}
}, 1500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(29)').addClass("frame-on-4");
}
}, 1600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-1");
}
}, 1700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-2");
}
}, 1800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-3");
}
}, 1900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-4");
}
}, 2000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-1");
}
}, 2100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-2");
}
}, 2200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-3");
}
}, 2300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(30)').addClass("frame-on-4");
}
}, 2400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-1");
}
}, 2500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-2");
}
}, 2600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-3");
}
}, 2700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-4");
}
}, 2800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-1");
}
}, 2900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(31)').addClass("frame-on-2");
}
}, 3000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(32)').addClass("frame-on-3");
}
}, 3100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(32)').addClass("frame-on-4");
}
}, 3200);
}, { offset: '98%' });
$('#panel4part2').waypoint(function(direction) {
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(33)').addClass("frame-on-1");
}
}, 100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(33)').addClass("frame-on-2");
}
}, 200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(33)').addClass("frame-on-3");
}
}, 300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(33)').addClass("frame-on-4");
}
}, 400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(34)').addClass("frame-on-1");
}
}, 500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(34)').addClass("frame-on-2");
}
}, 600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(34)').addClass("frame-on-3");
}
}, 700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(34)').addClass("frame-on-4");
}
}, 800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(35)').addClass("frame-on-1");
}
}, 900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(35)').addClass("frame-on-2");
}
}, 1000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(35)').addClass("frame-on-3");
}
}, 1100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(35)').addClass("frame-on-4");
}
}, 1200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(36)').addClass("frame-on-1");
}
}, 1300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(36)').addClass("frame-on-2");
}
}, 1400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(36)').addClass("frame-on-3");
}
}, 1500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(36)').addClass("frame-on-4");
}
}, 1600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(37)').addClass("frame-on-1");
}
}, 1700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(37)').addClass("frame-on-2");
}
}, 1800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(1)').addClass("frame-on-3");
}
}, 1900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(1)').addClass("frame-on-4");
}
}, 2000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(1)').addClass("frame-on-1");
}
}, 2100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(1)').addClass("frame-on-2");
}
}, 2200);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(1)').addClass("frame-on-3");
}
}, 2300);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(2)').addClass("frame-on-4");
}
}, 2400);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(2)').addClass("frame-on-1");
}
}, 2500);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(2)').addClass("frame-on-2");
}
}, 2600);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(2)').addClass("frame-on-3");
}
}, 2700);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(2)').addClass("frame-on-4");
}
}, 2800);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(3)').addClass("frame-on-1");
}
}, 2900);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(3)').addClass("frame-on-2");
}
}, 3000);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(3)').addClass("frame-on-3");
}
}, 3100);
setTimeout(function(){
if (direction === 'down' ) {
$('.circle-anim :nth-child(3)').addClass("frame-on-4");
}
}, 3200);
}, { offset: '98%' });
最佳答案
您确实需要一个递归计时器。您可以在这里使用:
function recursiveTimer(indexStart, indexEnd, direction, indexArray){
var classes = ['frame-on-1', 'frame-on-2', 'frame-on-3', 'frame-on-4'];
if(typeof indexArray === "undefined") indexArray = 0;
if(indexArray === classes.length) indexArray = 0, indexStart++;
if(indexStart <= indexEnd){
setTimeout(function(){
if (direction === 'down' ){
$('.circle-anim :nth-child(' + indexStart + ')').addClass(classes[indexArray]);
recursiveTimer(indexStart, indexEnd, direction, indexArray+1);
}
}, 100)
}
};
一旦函数被声明，你就可以绑定(bind)你的事件了:
$('#panel4').waypoint(function(direction){
recursiveTimer(27,32,direction);
})
$('#panel4part2').waypoint(function(direction){
recursiveTimer(27,37,direction);
setTimeout(function(){
recursiveTimer(1,3,direction);
}, 1900);
})
关于jquery - 对下一个伪类重复 jQuery addClass 一定次数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23296789/