Question

我之前在这里使用了一小部分代码来淡入整个页面。我使用的代码是，

SCRIPT

<!-- ꜜꜜ page load ꜜꜜ -->
 <script> 
    $(document).ready(function() {
        $('#p-load').fadeIn();
    });
 </script>

CSS

#p-load {
display: none;
}

我遇到的问题是脚本不会显示为永远不会运行。我有一个额外的脚本，这个p-load可能与它有关吗？

我还在学习脚本，我仍然感到困惑。我知道脚本在页面上按顺序运行，因此我将p-load脚本放在页面上的第二个脚本上方。这看起来好像脚本无法运行。

然而，当我将脚本放在body标签的正下方时，看起来好像脚本确实执行了。它只是跳过淡入淡出并显示所有内容。感谢您的帮助。

代码作为它的立场（16:06）

            <!-- ꜜꜜ css styles ꜜꜜ -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <link rel="stylesheet" type="text/css" href="css/division.css"/>
        <link rel="stylesheet" type="text/css" href="css/navigation.css"/>
        <link rel="stylesheet" type="text/css" href="css/library.css"/>
        <link rel="stylesheet" type="text/css" href="css/accordion.css"/>

        <!--[if lte IE 8]> <link rel="stylesheet" href="/css/ie.css"> <![endif]-->


        <!-- ꜜꜜ scripts ꜜꜜ -->           
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript"> 
        $(document).ready(function() {
            $('#p-load').hide().fadeIn("slow");
        });
        </script> 

        <script type="text/javascript" charset="utf-8" src="scripts/anim.js"></script>




</head>
<!-- ꜜꜜ end page head ꜜꜜ -->

    <!-- ꜜꜜ page body start ꜜꜜ -->
    <body> 
    <div id="p-load">

等...

脚本正在执行并在其他元素上运行，因此，我将其设置为淡出延迟3秒并将其应用于页脚。页面加载后，页脚在3秒后淡出。为什么它不会打败整个页面打败我...：/

这项工作

<script type="text/javascript">
        $(document).ready(function() {
            $('#p-load').hide().delay(500).fadeIn("slow");
        });
        </script>

我不知道为什么延迟现在会触发动画，但确实如此。谢谢大家的帮助。

Answer 1

我猜你没有看到它，因为它的速度太快了。试试

$(document).ready(function() {
        $('#p-load').fadeIn("slow");
    });

您可以指定fadeIn，“slow”，“fast”或数字的持续时间。 “慢”对应于600毫秒。我可以看到元素逐渐消失，持续时间= 5000。

来自http://api.jquery.com/fadein/：

持续时间以毫秒为单位;值越高表示速度越慢动画，而不是更快的动画。字符串'快'和'慢'可以提供的指示持续时间为200和600毫秒，分别。如果提供了任何其他字符串，或者持续时间参数省略，默认持续时间为400毫秒使用

Answer 2

删除display：none样式属性，改为使用jquery hide。所以：

 <script> 
 $(document).ready(function() {
    $('#p-load').hide().fadeIn();
 });
 </script>

Answer 3

试试这个，

 <script> 
    $(document).ready(function() {
        $('#p-load').fadeIn(10000);
    });
 </script>

它提供10秒（10000毫秒）的持续时间

FIDDLE

简单的页面淡入

3 个答案: