jquery 定时高亮效果

Question

默认是这样的，我想开始后，第一个高亮，恢复原样然后再高亮，再恢复原样。再高亮周而复始下去！直到最后一个完成 ！
我用了定时器，我发现定时器一执行里面一次性就跑完了，没有达到我想要的效果！

            <div class="word">
                <div class="item animated">
                    <em>我</em>
                    <span></span>
                    <b><i></i>1</b>
                </div>
                <div class="item animated">
                    <em>们</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>是</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>幸</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>福</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>的</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item">
                    <em>一</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>家</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>人</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>花</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>好</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
                <div class="item animated">
                    <em>圆</em>
                    <span></span>
                    <b><i></i>0</b>
                </div>
            </div>

原始HTML代码

        const word = $(".word .item");
        word.each(function (index, element) {
            const t = $(this);
            setTimeout(function () {
                t.find("span").css("background", "none");
            }, index * 100);
            const out = setTimeout(function () {
                t.find("span").css("background", "rgba(0,0,0,.3)");
            }, index * 200);
        });

我的JS代码，这样子的效果没有达到我想要的那种效果！

Answer 1

再加一个setinterval定时器在外面

Answer 2

没太理解你的描述，一个接一个的高亮吗。如果是，简单写了下面这个。

let timer = null;
let index = 0;
const word = $(".word .item");

timer = setInterval(() => {
    // 找到当前高亮的元素
    let activeSpan = $(".highlight");
    
    // 需要添加高亮的元素
    let highLightSpan = word[index].find("span");
    
    // 如果有就移除高亮
    if(activeSpan.length > 0){
        activeSpan.removeClass(".highlight");
    }
    
    // 依次添加高亮效果
    highLightSpan.addClass(".highlight");
    
    // 如果遍历完毕 清空定时器 清零索引
    if(index === word.length){
        clearInterval(timer);
        timer = null;
        index = 0;
    }
    
    // 递增索引
    index++;
}, 100)

Answer 3

你的意思是走马灯的效果吧，第一个亮，余下的全暗，然后第二个亮，与下的全部暗，一直循环下去。
如果用css的话比较麻烦，需要挨个设置动画的delay时间。不如用js的setInterval，只有第一个是亮的状态，别的都是暗的（可以加蒙层实现），然后定时1秒后第一个亮变暗，第二个变亮，依次走下去。走到你想要的时候再clearInterval。