Question

有没有办法在加载页面时使用jQuery的淡入/淡出效果？我不想隐藏div，我调用fadeIn（）方法来显示这些div。我希望页面加载具有这样的效果。任何解决方案？非常感谢！

Answer 1

Desription

您可以将整个身体的css不透明度属性设置为0，然后使用jQuery animate。

我从来没有想过这个，好问题！我测试了它，它的确有效！

示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>

        <script type="text/javascript" src="PathToJqueryJsFile" />
        <script type="text/javascript">
            $(function () {
                $("body").animate({ opacity : "1.0" });
            });
        </script>
    </head>
    <body style="opacity:0"">
            Hello world
    </body>
</html>

更新

在不检查用户是否启用了javascript的情况下，请注意隐藏元素。

Answer 2

您必须等待页面加载才能执行此类代码。把它放在里面，它会尽快运行：

$(document).ready(function(){

  // here

});

Answer 3

我建议不要使用fadeIn（）。它可能导致显示不一致，而元素和＆amp;图像正在渲染

我为你创造了这个jsFiddle： http://jsfiddle.net/Qrk6m/2/

我建议使用visibility：hidden~＆gt;可见性：可见CSS，然后使用jQuery的animate（）函数

CSS中的

：

#elementName{
    visibility:hidden;
}

在JS Doc Ready Put中：

$(document).ready(function(){
    $('#elementName').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},'slow');
});

无论哪种方式，您可能希望避免显示：none和fadeIn（）。

Answer 4

我认为你无法在加载时实现真正的淡入淡出效果，除非你试图淡化的div默认设置为隐藏。

Fadein对页面加载的影响

4 个答案:

Desription

我从来没有想过这个，好问题！我测试了它，它的确有效！

示例

更多信息

更新