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

Question

我正在处理一个需要我显示和隐藏文本的项目。我希望屏幕上出现一节经文，在x时间后消失，然后出现新文本。我对Javascript和JQuery很陌生，所以我真的不确定如何做到这一点。以下是我到目前为止的代码：

断续器

<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>

断续器

$("#verse1").show();

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

$("#verse2").show();

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

$("#verse3").show();

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

这两个函数似乎同时被调用，这使得文本同时出现和消失。我确信有一个简单的解决方案，我忽略了这一点，但我在网上看过，似乎无法弄清楚这一点。

Answer 1

问题在于，代码假定 setTimeout 函数等待时间完成。相反，代码将继续，并记下在指定时间后运行代码。要修复它，您只需要嵌套 setTimeout 函数：$("#verse2").hide(); // So these aren't showing at the start$("#verse3").hide();$("#verse1").show();setTimeout(function() {&nbsp; &nbsp; $("#verse1").hide();&nbsp; &nbsp; $("#verse2").show();&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#verse2").hide();&nbsp; &nbsp; &nbsp; &nbsp; $("#verse3").show();&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() { $("#verse3").hide(); }, 2000);&nbsp; &nbsp; }, 2000);}, 2000);