如何通过事件触发器显示褪色警报框

Question

我是JavaScript的新手，并且正在传单中使用d3进行动画处理，并且具有如下异步功能：

async function animateWrapper() {
        for (let i = 0; i < lines.length; i++) {
            let line = lines[i];

            console.log(i)
            if(i==80){
                //alert("Success")
                $("div.success").fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
                const pStandby = line.node().getPointAtLength(line.node().getTotalLength());
                g.append("circle").attr("cx", pStandby.x).attr("cy", pStandby.y).attr("r", 5).style("fill", "red").style("opacity", "1");
                await sleep(3000);
            }

            function tweenDash() {
                return function (t) {
                    const l = line.node().getTotalLength();
                    const interpolate = d3.interpolateString("0," + l, l + "," + l);
                    const marker = d3.select("#marker");
                    marker.style("fill", line.attr('marker-color'));
                    const p = line.node().getPointAtLength(t * l);
                    marker.attr("transform", "translate(" + p.x + "," + p.y + ")"); //move marker
                    //console.log(t)
                    return interpolate(t);
                }
            }

            await animate(line, tweenDash);
        }
    }

所以当我80岁时，我想淡出警报，然后淡出，但是当我尝试

$("div.success").fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );

我的html div就像

<div class="alert-box success">Successful Alert !!!</div>

我的CSS代码

.alert-box {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

它没有警报，但是如果我尝试alert（“ Success”），它会代替$("div.success").fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );起作用。

感谢您的任何帮助。