jQuery 在网站/内容加载后淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8076365/
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
jQuery Fade in Site/Content Once It's Loaded?
提问by Jezthomp
Are there any tutorials or plugins for fading a site into view once its loaded properly, to limit any jarring etc, so the content appears smoothly basically?
是否有任何教程或插件可以在网站正确加载后将其淡入视野，以限制任何不和谐等，因此内容基本上可以顺利显示？
I suppose it would be easier if it was just a specific area, as a header or footer will already be cached, from previous pages...
我想如果它只是一个特定区域会更容易，因为页眉或页脚已经被缓存，从前几页...
For example a portfolio page with various thumbnails, they only appear smoothly when ready.
例如，带有各种缩略图的投资组合页面，它们只有在准备好时才会平滑显示。
Can this be done?
这能做到吗？
Thank you for any help :)
感谢您的任何帮助 ：）
回答by T.J. Crowder
First, a side point: In general, web designers spend a lot of time trying to improve perceived page load time, getting things shown as quickly as possible. This actively goes the other way, presenting a blank page until everything is ready, which may not be ideal.
首先，附带一点：一般来说，网页设计师花费大量时间来尝试改善感知页面加载时间，尽可能快地显示内容。这积极地反过来，在一切准备就绪之前呈现一个空白页面，这可能并不理想。
But if it's appropriate for your situation:
但如果它适合您的情况：
Since everything visible will be a descendant of body, you could load bodyhidden and then fade it in. It would be important to include a fallback for users without JavaScript (typically fewer than 2% at least according to Yahoo, but still). So along the lines of:
由于所有可见的都将是 的后代body，因此您可以加载body隐藏的然后将其淡入。为没有 JavaScript 的用户提供回退非常重要（根据 Yahoo，通常至少少于 2% ，但仍然如此）。所以沿着以下路线：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
inline here just for purposes of the example
-->
<style type="text/css">
body {
/* Hide it for nifty fade-in effect */
display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
/* Re-displays it by overriding the above */
display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {
$(document.body).fadeIn(1000);
})(jQuery);
</script>
</body>
</html>
A couple of variations on the script part of that, depending on when you want the fade-in to occur:
脚本部分的几个变体，取决于您希望淡入何时发生：
Wait for "ready" event:
等待“就绪”事件：
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
Wait for the window#loadevent:
等待window#load事件：
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#loadfires verylate in the page load process, after all external resources (including all images) have loaded. But you said you wanted to wait until everything was loaded, so that might be what you want to do. It will definitely make your page seem slower...
window#load火灾非常在页面加载过程后期，所有的外部资源（包括所有图片）都加载之后。但是你说你想等到所有东西都加载完毕，所以这可能是你想要做的。它肯定会让你的页面看起来更慢......
回答by Yes Barry
Yes, wrap your content with a div (e.g. <div id="main-content">) and in your css put this:
是的，用 div（例如<div id="main-content">）包裹您的内容，并在您的 css 中输入：
div#main-content { display: none; }
Then use this script.
然后使用这个脚本。
$(document).ready(function() {
$('#main-content').fadeIn();
});
回答by direct
Another way to accomplish this is via the Animate.css project. Its pure CSS so there is no need to rely on JS:
实现此目的的另一种方法是通过 Animate.css 项目。它是纯 CSS，因此无需依赖 JS：
Just add the 'animated' and 'fadeIn' class to your parent element and all children will fade in.
只需将 'animated' 和 'fadeIn' 类添加到您的父元素中，所有子元素都会淡入。
回答by Stefan Endres
$(document).ready(function() {
$('body').hide().fadeIn('fast');
});
回答by sushil bharwani
jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});
where container is the id of the div containing your entire content.
其中 container 是包含整个内容的 div 的 id。
回答by user3686007
div#main-content { display: block; }
To make it work with or without Javascript you can use
要使其在有或没有 Javascript 的情况下工作，您可以使用
document.getElementById("#main-content").style.display = "none";
Then use this script.
然后使用这个脚本。
$(document).ready(function() {
$('#main-content').fadeIn();
});
