Javascript 如何使Div在5秒后显示

所以我创建了一个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>

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

$（函数（）{
$（“#按钮”）.delay（2000）.fadeIn（500）；
});

html:

欢迎来到DayZ
$（函数（）{
$（“#按钮”）.delay（5000）。fadeIn（500）；
});

---

注意：以上只是我的html文件的一个片段，不是完整的代码

您需要将按钮设置为“手前不可见”

样式应该是

display:none

，或者您可以执行一个瞬间

.fadeOut（）

（或者另一个答案建议的

.hide（）

），持续时间为0，然后延迟，然后淡入

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

$button.hide();

var timeOut = setTimeout(function() {

    $button.fadeIn();

}, 5000);

该方法使用JavaScript隐藏页面加载上的

按钮

，然后使用setTimeout对象使其在淡入前等待5秒（记住出于性能原因也要缓存选择器）

为了不引人注意的脚本，你可以考虑只使用一个简单的CSS<代码>显示：没有< <代码> >而不是<代码> HIDE（）/<代码>方法。

---

为了语义HTML，我将您的

#按钮

切换为

按钮

元素，因为您的

div

看起来和行为都像

按钮

元素；不过，无论哪种方式，代码都会起作用

首先需要隐藏div。显示：无应为内联样式：

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

脚本：

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

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

$（函数（）{
$（“#按钮”）.delay（5000）。fadeIn（500）；
});

---

Jquery delay以毫秒表示，因此将delay参数更改为5000。

我添加了display:none方法，现在div仍然不可见，根本不显示。我将在上面添加html代码