使用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() {

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

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

    setTimeout(function() {

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

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

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

    }, 2000);

}, 2000);