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

Fade in web elements on page load using jQuery

本文关键字：淡入 web 元素 加载 jQuery 使用      更新时间：2023-09-26

试图获得一个主徽标，然后在加载此网页时获得一个淡出的回车按钮。除了在代码之后取出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;
}

您的问题在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;
}

希望得到帮助。

在您的脚本标签中试试这个：

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

这是小提琴。

相关文章：