Заставьте <p>исчезнуть через определенное время, используя JS или JQuery

Question

Я работаю над проектом, который требует от меня показывать и скрывать текст. Я хочу, чтобы один стих появился на экране, исчез через 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);

Кажется, что обе функции вызываются одновременно который заставляет текст появляться и исчезать одновременно. Я уверен, что есть простое решение, которое я упускаю из виду, но я посмотрел в Интернете и, похоже, не могу понять этого.

Answer 1

Проблема в том, что код предполагает, что функция setTimeout ожидает времени до sh. Вместо этого код продолжается, и отмечает, что код нужно запустить по истечении указанного времени. Чтобы исправить это, вам просто нужно вложить функции 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);