javascript - 使用JS或JQuery在一定时间后使<p>消失

我正在做一个需要我显示和隐藏文本的项目。我希望一首诗出现在屏幕上，经过x倍的时间后消失，然后出现新的文字。我对Javascript和JQuery还是很陌生，所以我不确定如何使它工作。下面是我到目前为止的代码:

的HTML

<p class="mast__text js-spanize" id="verse1">
 Magnetic light in the blue-high haze
</p>

<p class="mast__text js-spanize" id="verse2">
 A magnifying glass upon my face
</p>

<p class="mast__text js-spanize" id="verse3">
 It's so hot I've been melting out here
</p>

JS:

$("#verse1").show();
setTimeout(function() { $("#verse1").hide(); }, 2000);

$("#verse2").show();
setTimeout(function() { $("#verse2").hide(); }, 2000);

$("#verse3").show();
setTimeout(function() { $("#verse3").hide(); }, 2000);

似乎同时调用了两个函数，这使文本同时出现和消失。我确定对此有一个简单的解决方法，但我一直在网上查看，似乎无法解决。

最佳答案

问题在于代码假定setTimeout函数等待时间完成。而是继续执行代码，并在指定的时间后运行代码。要修复它，您只需要嵌套setTimeout函数:

$("#verse2").hide(); // So these aren't showing at the start
$("#verse3").hide();

$("#verse1").show();
setTimeout(function() {
    $("#verse1").hide();

    $("#verse2").show();
    setTimeout(function() {
        $("#verse2").hide();

        $("#verse3").show();
        setTimeout(function() { $("#verse3").hide(); }, 2000);
    }, 2000);

}, 2000);