[英]Make <p> disappear after certain amount of time using JS or JQuery
我正在做一个需要我显示和隐藏文本的项目。 我希望一首诗出现在屏幕上,在 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 function 等待时间完成。 取而代之的是,代码继续运行,并记下在指定时间后运行代码。 要修复它,您只需嵌套 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.