将大部分页面 CSS 应用于 jQuery FadeOut？答案

【问题标题】：Applying majority of page CSS to a jQuery FadeOut?将大部分页面 CSS 应用于 jQuery FadeOut？
【发布时间】：2014-11-27 12:44:48
【问题描述】：

我有这个 Jquery 淡出代码：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
$(window).load(function () {
    $(".loader").fadeOut("fast");
})
</script>

.loader 的 CSS 是

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000000;  
}

因此，当页面加载时，用户看到的是完全黑屏（背景色元素），所有其他页面元素有效地从黑屏淡入。

所有页面都使用 MasterPage/CSS 布局 - 我希望不只是将背景颜色应用到 .loader，而是应用所有元素，以便在回发发生时，边框、边距、图像和菜单等看起来像它们被冻结了，只是像新控件和文本这样的新元素会在页面之间有效地淡入。

最好的方法是什么？

【问题讨论】：

标签： jquery css asp.net

【解决方案1】：

因此，您希望页面的某些部分淡入，而不是整个页面。如果您更改 css 文件的宽度、高度、左侧、顶部致敬，则可以执行此操作。接下来，您可以在 css 文件中创建新条目，例如 loader2。这里有一些实验，如果需要你可以添加更多的加载器类。

css 文件：

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 300px;
height: 100px;
z-index: 9999;
background-color: #000000;  
}

.loader2 {
position: fixed;
left: 350px;
top: 150px;
width: 200px;
height: 200px;
z-index: 9999;
background-color: #000000;  
}

并将 Jquery 更改为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
$(window).load(function () {
    $(".loader").fadeOut("fast");
    $(".loader2").fadeOut("fast");
})

【讨论】：