使用jQuery淡入页面加载中的Web元素

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 个解决方案

解决方案1
0 2015-06-29 15:04:04

解决方案2
0 2015-06-29 15:30:30

使用jQuery淡入页面加载中的Web元素

问题描述

2 个解决方案

解决方案1 0 2015-06-29 15:04:04

解决方案2 0 2015-06-29 15:30:30

解决方案1
0 2015-06-29 15:04:04

解决方案2
0 2015-06-29 15:30:30