停止逐行循环 JavaScript 动画

Question

我目前正在使用一段JavaScript，它逐行淡入一段文本。

Javascript不是强项，我正在努力阻止动画循环。

关于如何实现这一目标的任何帮助和建议都会很棒。 这是小提琴 https://jsfiddle.net/spittman/7wpqkfhj/5 的链接

谢谢！

爪哇语

$(document).ready(function() {

function fadeInLine(line){
$('<span />', {
html: line.trim(),
style: "opacity: 0"
})
.appendTo($greeting)
.animate({opacity:1}, 500);
}
function rotateLines(interval){
setTimeout(() => {
if(i >= lines.length-1){
i = 0;
interval = 1500;
setTimeout(()=>{ $greeting.empty(); }, interval)
} else {
fadeInLine(lines[i]);
i++;
interval = 1500;
}
rotateLines(interval);
}, interval);
}
const $greeting = $('div#container p');
const text = $greeting.html();
const lines = text.split("n").filter((e) => e.replace(/s+/, ""));
let i = 0;
$greeting.empty();
rotateLines();

});

目录

<div id="container">
<p>
There’s another side to London.<br>
Beyond the jurisdiction of The City.<br>
Undiscovered by outsiders.<br>
Loved by insiders.<br>
An ever-changing place...<br>
That teases our wildside and thrills our artside.<br>
Blurs our workside into our playside.<br>
Where we live on the brightside.<br>
And explore our darkside.<br>
Hidden in plain sight, this is Bankside.<br>
London’s other side.<br>
.
</p>
</div>

Answer 1

将定时调用放在else子句中，并删除greeting.empty()行。

function rotateLines(interval){
setTimeout(() => {
if(i >= lines.length-1){
i = 0;
interval = 1500;
// setTimeout(()=>{ $greeting.empty(); }, interval)
} else {
fadeInLine(lines[i]);
i++;
interval = 1500;
rotateLines(interval);
}
// rotateLines(interval); 
}, interval);
}

JSFiddle

动画在整个文本淡入后停止。

Answer 2

只需删除重置元素和计数器的 if 子句即可。

function rotateLines(interval){
setTimeout(() => {
fadeInLine(lines[i]);
i++;
interval = 1500;
rotateLines(interval);
}, interval);
}

JSFiddle