Question

我有这个Jquery fadeout代码：

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

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

1 个答案: