javascript - 如何让Div在5秒后出现javascript

Question

所以我创建了一个 Div，它将充当一个按钮，我希望它保持不可见，直到 5 秒过去，然后我希望 div 淡入。我有下面的代码，但它不起作用，有什么帮助吗？

谢谢!

代码:

按钮 html 的 Div ID:

<div id="button" onclick="window.open('home.html','home');" style="cursor: hand;">

脚本:

<script>
$(function() {
$("#button").delay(2000).fadeIn(500);
});
</script>

html:

<title>Welcome to DayZ</title>
<link rel="shortcut icon" href="http://dayzgame.com/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/fadein.css">


<script src="scripts/fadein.js"></script>

<script>
$(function() {
$("#button").delay(5000).fadeIn(500);
});
</script>

注意:上面只是我的 html 文件中的一个片段，而不是完整的代码。

Answer 1

//cache your selector
$button = $('button');

$button.hide();

var timeOut = setTimeout(function() {

    $button.fadeIn();

}, 5000);

该方法使用 JavaScript 隐藏页面加载时的按钮，然后使用 setTimeout 对象使其在淡入之前等待 5 秒(出于性能原因，请记住缓存您的选择器。 )

为了不引人注目的脚本编写，您可以考虑仅使用简单的 CSS display: none 而不是 hide() 方法。

出于语义 HTML 的考虑，我将您的 #button 切换为 button 元素，因为您的 div 的外观和行为类似于 按钮元素；不管怎样，代码都会工作。