Question

尝试获取主徽标，然后输入按钮以在此网页加载时淡入。尝试下面的代码，除了在代码后取出div，但没有运气。

有什么想法吗？提前谢谢。

<!doctype html>
<html>
 <head>

    <title>The Webspace of Reality</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="style.css">

 </head>
 <body>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(function() {

            $("#mainImage").hide().fadeIn("slow", function() {
                $("#enterButton").hide().fadeIn("slow")
            });
        });

    </script>
    <div id="mainImage">
    </div>
    <div id="enterButton"></div>

 </body>
</html>

#mainImage img {
    width: 550px;
    display: block;
    position: static;
    margin-right: auto;
    margin-left: auto;
}

#enterButton button {
    background-color: black;
    font-family: Futura, Helvetica, sans-serif;
    font-size: 28px;
    border-radius: 10px;
    height: 50px;
    width: 200px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: static;
    margin-top: 20px;
    border-style: none;
}

Answer 1

你的问题在css中。在名称选择器后添加逗号：

#mainImage, img {
    width: 550px;
    display: block;
    position: static;
    margin-right: auto;
    margin-left: auto;
}
#enterButton, button {
    background-color: black;
    font-family: Futura, Helvetica, sans-serif;
    font-size: 28px;
    border-radius: 10px;
    height: 50px;
    width: 200px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: static;
    margin-top: 20px;
    border-style: none;
}

希望得到这个帮助。

Answer 2

在脚本代码中尝试此操作：

$("#mainImage, #enterButton").hide();
$("#mainImage").fadeIn("slow", function() {
        $("#enterButton").fadeIn("slow");
});

这里是jsfiddle。

使用jQuery在页面加载时淡入web元素

2 个答案: