javascript 如何让我的 div 在页面加载时用 jQuery 淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3392748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get my div to fade out with jQuery on page load?
提问by Joel Glovier
I'm brand new to jQuery (and javascript in general). I've been meaning to use it/learn it for some time, and nows the time.
我是 jQuery（以及一般的 javascript）的新手。我一直想使用它/学习它一段时间，现在是时候了。
So I'm going to use jQuery on this pageto fade out the "under construction" warning at the top of the page on load. But I'm unfamiliar with any of the functions or selectors to use.
因此，我将在此页面上使用 jQuery来淡出加载时页面顶部的“正在建设中”警告。但我不熟悉要使用的任何功能或选择器。
I found this basic articleat jQuery which has a demo that seems to work perfect for what I'm doing, only it's set up to fade out on click.
我在 jQuery 上找到了这篇基本文章，它有一个演示，似乎非常适合我正在做的事情，只是它设置为单击时淡出。
What do I need to change to get it to fade out after a few seconds once the page has loaded, and can you point me where to look to find out more about those type of functions (specifically on jQuery's site, if you're familiar). And please don't say, "In the documentation." I'm a noob but not a dummy, thanks. I'm just trying to learn more about that particular area of the syntax responsible for functions for now (if that's what they're called).
我需要改变什么才能让它在页面加载几秒钟后淡出，你能指出我在哪里可以找到更多关于这些类型的函数的信息（特别是在 jQuery 的网站上，如果你熟悉的话）。并且请不要说“在文档中”。我是菜鸟但不是傻瓜，谢谢。我只是想更多地了解目前负责函数的语法的特定区域（如果它们就是这样称呼的话）。
回答by cnanney
回答by JohnFx
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#myDiv").fadeOut('slow');
}
回答by Brandon Boone
Here's a complete example.
这是一个完整的例子。
Just paste this into an html file and save it.
只需将其粘贴到 html 文件中并保存即可。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 3000);
});
function fadeout(){
$('#tempwarning').fadeOut('slow', function() {
// Animation complete.
});
}
</script>
</head>
<body>
<div id="tempwarning">
<div class="wrap">
<span class="warning-icon">!</span>
<p>
Oops! Please pardon my appearance. I'm still <a href="http://graphicriver.net/item/under-construction-graphic/53758?ref=jglovier">under development</a>. Please visit often.
</p>
</div>
</div>
</body>
</html>
EDIT:
编辑：
This line of code:
这行代码：
$(document).ready(function() { });
Waits for the page to load before executing anything inside it.
在执行其中的任何内容之前等待页面加载。
回答by Derrick
Hey, the site looks cool. This should do it for you.
嘿，该网站看起来很酷。这应该为你做。
$(document).ready(function() {
setTimeout(fade, 2000);
}
function fade(){
$("#tempwarning").fadeOut(1000);
}
回答by You
$(document).ready(function(){
setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});
回答by JAGC96
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 1000);
});
function fadeout(){
$('.loader').fadeOut('fast', function() {
// Animation complete.
});
}
</script>
Perfect for a LoadingPage
完美的加载页面
