我有这个脚本,我已经能够使它在20秒内fadeOut,但我希望它需要10秒后显示页面加载,我应该修改什么?
jQuery("#messageBox").hide().slideDown();
setTimeout(function(){
jQuery("#messageBox").fadeOut();
}, 20000);提前感谢
发布于 2020-04-09 18:24:26
要让内容在10秒后淡入,您需要使用CSS隐藏页面加载时的所有内容,以避免FOUC problem,然后调用fadeIn()。如下所示:
setTimeout(function() {
$('#container').fadeIn();
}, 10000);#container { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<h1>Lorem ipsum</h1>
</div>
发布于 2020-04-09 18:32:14
你的方向是对的。就像你正在应用fadeOut一样。
您需要在setTimeout的帮助下,在10秒后显示您的div。但是你必须在页面加载时默认隐藏这个div。
请看下面的例子:
jQuery("#messageBox").hide();
setTimeout(function(){
jQuery("#messageBox").slideDown();
}, 10000);
setTimeout(function(){
jQuery("#messageBox").fadeOut();
}, 20000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
https://stackoverflow.com/questions/61118980
复制相似问题