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隐藏页面加载button，然后使用setTimeout对象使其在淡入之前等待5秒（记得也出于性能原因缓存选择器。）

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

为了语义HTML，我将您的#button切换为button元素，因为您的div看起来像button元素;但是，无论哪种方式代码都可行。

Answer 2

您需要先将按钮设置为隐身。

样式应为display:none，或者您可以立即.fadeOut()（或.hide()，如另一个答案所示），持续时间为0，然后是延迟，然后是淡入。< / p>

Answer 3

您最初需要隐藏div。 display：none应该是内联样式：

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

脚本：

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

Jquery延迟以毫秒为单位，因此将delay参数更改为5000。

如何让Div在5秒后出现javascript

3 个答案: