0

单击 page1 中的按钮时，我有 2 个页面，它将链接到第 2 页，然后 page2 将加载转换。页面以淡入方式加载，不适用于向下滑动。

$(document).ready(function() {
            $("body").css("display", "none");
            $("body").fadeIn(2000);

    });

上面的代码运行良好，但下面的代码不起作用：

$(document).ready(function() {
            $("body").css("display", "none");
            $("body").slideDown(2000);

    });

我的完整代码

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
<script type="text/javascript" src="C:/Users/jovine/Desktop/Anything/BAS/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/jovine/Desktop/Anything/BAS/jquery.fullbg.min.js"></script>
<link type="text/css" rel="stylesheet" href="basabout.css" media="all" />

<script type="text/javascript">
$(window).load(function(){ 
            $("body").slideUp(1).delay(2000).slideDown('slow');


});
</script>
</head>

<body>

<img class="fullbg" src="background2.png" id="background" style="z-index:-9999; " />

<script type="text/javascript">
$(window).load(function() {
    $("#background").fullBg();
});
</script>

<div id="header" class="header">
<img class="title" src="aboutus.png">
<br>
<img class="triangle" src="triangle.png">
</div>
<div id="content" class="content">
    <img class="subtitle" src="about.png">
    <br />
    <p class="subtitle_content">We are the voice of the Beauty industry in Singapore.
    <hr class="divider">
        <div class="logo">
        <img src="peoples.png" style="margin-left:70px;">
        <img src="roll.png" style="margin-left:340px;">
        <img src="mic.png" style="margin-left:440px;">
        </div>
        <div class="logo_title">
        <img src="whoarewe.png" style="margin-left:40px;">
        <img src="whatwedo.png" style="margin-left:320px;">
        <img src="whatscomingup.png" style="margin-left:420px;">
        </div>
        <div id="logo_content" class="logo_content">
        <p class="content1">BAS stand for Beauty Association of<br>Singapore. BAS was built to contribute<br>to the development, advancement and<br>prestige of the Beauty industry in<br>Singapore.</p>
        <p class="content2">We are inspired by purpose, and we<br>strive to be the voice of the burgeoning<br>Beauty industry in Singapore.</p>
        <p class="content3">STAY TUNED!</p>
        </div>

</div>
</body>
</html>
4

2 回答 2

0

演示： jQuery 中的 slideDown

你可以试试这个，这样你就可以看到 slideDown 的效果：

$(document).ready(function() {
$("body").slideUp(1).delay(2000).slideDown('slow');
});

有关详细信息，您可以参考jQuery 文档页面：jQuery slideDown

或者

你可以试试

$(window).load(function(){

代替

$(document).ready(function(){

因为很少有元素在$(document).ready(function(){

于 2013-08-14T08:55:27.787 回答
0

从jQuery 下载链接中保存 jQuery 并将其保存在名为 xyz 的文件夹中。在同一文件夹中，将以下代码与 .html 一起复制。现在运行 HTML 页面。对我来说很好。

<html>
<head>
   <script src="jquery-1.10.2.js"></script>
</head>
 <body>
    <div>hello how are you</div>
    <p>See it is working</p>

<script>
$(document).ready(function() {
        $("body").css("display", "none");
        $("body").slideDown(1).delay(2000).slideUp("slow");

});
</script>

</body>
</html>
于 2013-08-14T11:05:47.210 回答