Question

目前，图像弹出，淡出，页面弹出。但是，我希望页面在初始图像淡出后淡入。

<html>
<head>
    <style type="text/css">
        #content {
            display:none;
            }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"> 
        $(function(){
            setTimeout(function() {
                $("#splash").fadeOut("slow", function() {
                    $("#content").show();
                });
            }, 500);
        });
    </script>
</head>
<body>
<div id="splash">
    <img src="http://farm1.static.flickr.com/215/482472428_5f2f592b64.jpg" />
</div>
<div id="content">
    Content
</div>
</body>
</html>

Answer 1

将$("#content").show();更改为$("#content").fadeIn("slow");

Answer 2

你的意思是：


$(document).ready(function() {
  $("#splash").fadeOut("slow", function() {
    $("#content").fadeIn();
  });
});

Answer 3

每次我使用jQuery时，我个人都会使用文档就绪函数。

BTW：您使用的是过时的jQuery，请改用此链接：http://code.jquery.com/jquery-1.7.2.min.js

试试这个：

<html>
<head>
    <style type="text/css">
        #content {
            display:none;
            }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function() {
             $("#splash").fadeOut("slow");
             $("#content").delay(500).fadeIn();
        });
    </script>
</head>
<body>
<div id="splash">
    <img src="http://farm1.static.flickr.com/215/482472428_5f2f592b64.jpg" />
</div>
<div id="content">
    Content
</div>
</body>
</html>

javascript edit：为此脚本添加淡入功能

3 个答案: