jquery - 将大部分页面 CSS 应用于 jQuery FadeOut？

Question

我有这个 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，而是应用所有元素，以便在回传发生时，边框、边距、图像和菜单等看起来像它们被卡住，只有新元素(如新控件和文本)在页面之间有效地淡入。

这样做的最佳方法是什么？

Answer 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");
})