Question

我有2页当点击页面1中的按钮它将链接到页面2，然后页面2将加载转换。页面加载淡入并且不适用于slidedown。

$(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>

Answer 1

演示： slideDown in jQuery

您可以尝试这样，以便可以看到slideDown的效果：

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

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

或

你可以尝试

$(window).load(function(){

而不是

$(document).ready(function(){

$(document).ready(function(){
时没有完全加载的元素很少

Answer 2

从jQuery download链接保存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>

淡入页面效果很好而且滑动不起作用

2 个答案: