javascript - 如何在向JQuery中的html元素添加类之间增加延迟？

我正在为我的投资组合页面的这一部分制作动画：



我希望这5个酒吧中的每个酒吧一次点亮一次。

这是与此相关的代码：

HTML：

<div class="row">
    <div class="col-lg-12 skill-item">
        <div class="row">
            <div class="col-lg-2"><i class="devicon-html5-plain-wordmark"></i></div>
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-12 skill-bar">
                        <div class="row">
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                        </div>
                    </div>
                    <div class="col-lg-12 skill-level">
                        HTML5
                    </div>
                </div>
            </div>
        </div>
    </div>

SCSS：

.skill-rank-inactive {
    background: white;
    border: 2px solid white;
    height: 3vh;
    transition: all 2s;
}

#back-end {
    .skill-rank-active {
        background: $green;
        border: 2px solid white;
        height: 3vh;
    }

    i {
        color: $green;
    }
}

#front-end {
    .skill-rank-active {
        background: $blue-bright;
        border: 2px solid white;
        height: 3vh;
        transition: all 2s;
    }

    i {
        color: $blue-bright;
    }
}

Javascript：

$('#skills-page').bind('inview', function() {
    $('.skill-rank-inactive').addClass('skill-rank-active');
    $('.skill-rank-inactive').removeClass('skill-rank-inactive');
});

有没有一种方法可以在页面上每个“技能等级”的转换之间增加500ms的延迟？会有多种技能，例如PHP，CSS等。我希望每种技能都可以同时开始。每个技能的第一个等级开始，然后500ms一直上升到下一个等级。

最佳答案

我决定采用在此网站上找到的方法：

https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/