搜索
搜索

重复jQuery addClass到下一个伪类一定次数

Sam 发表于 Dev
17
山姆

我正在使用以下代码通过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%' });
卡尔·安德烈·加农（Karl-AndréGagnon）

您确实需要一个递归计时器。在这里您可以使用：

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)
    }
};

声明该函数后，即可绑定事件：

$('#panel4').waypoint(function(direction){
  recursiveTimer(27,32,direction);
})

$('#panel4part2').waypoint(function(direction){
  recursiveTimer(27,37,direction);
  setTimeout(function(){
    recursiveTimer(1,3,direction);
  }, 1900);
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery的：添加类到页脚标记后的下一个元素

jQuery查找下一个类

jQuery slideToggle与类名称的下一个容器

jQuery在列表中查找下一个类

jQuery下一个类href

遍历到下一个输入元素-JQuery

提取从一个句子到下一个句子重复的单词

jQuery addClass仅用于下一个特定元素-并非页面上的全部

我想重复一个执行一定次数的动作的 for 循环

下一个/上一个jQuery控件类跳了太多列表项

jQuery - 在点击一定次数后用另一个替换图像

在 Jquery 中运行一个函数一定次数

For 循环将每个循环重复到下一个

如何存储函数的输出并将存储的输出作为下一个输入，并重复此过程特定的次数

查找所有下一个类，直到类jquery

检查重复项并移至下一个元素

pdb重复下一个命令N次

在 jQuery 中定位下一个类时面临的问题

jQuery，如果元素是下一个并具有类？

jQuery将CSS类应用于下一个单个元素

jQuery：使用相同的类查找下一个元素

jQuery：如果为XYZ，则将类添加到此AND下一个元素

如何使用jQuery获取类的下一个实例

按类查找下一个元素（可能不是兄弟）jquery

jQuery查找具有类名称的下一个元素

在整个代码中的特定元素之后按类查找下一个元素（jQuery）

当同一类不连续重复时，滚动到下一个 div 问题

Mysql：获取重复的记录中的下一个和上一个

jQuery滚动播放下一个视频

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档