Я новичок в 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;
}
Он не предупреждает, но вместо$("div.success").fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
если я попробую оповещение («Успех»), это сработает.
Любая помощь приветствуется. Спасибо