fade in a page works well and slidedown doesn't work

StackOverflow https://stackoverflow.com/questions/18226698

  •  24-06-2022
  •  | 
  •  

Question

I have 2 pages when button in page1 is clicked it will linked to the page 2, then the page2 will load with transition. The page loads with fade in and doesnt work with slidedown.

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

    });

The code above works well,but the below doesnt work:

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

    });

My full code

<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>
Was it helpful?

Solution

Save jQuery from jQuery download Link and save it in a folder name xyz. In same folder copy the following code with the .html. Now run the HTML page. works fine for me. 

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

OTHER TIPS

Demo: slideDown in jQuery

You can try this so that you can see the effect of slideDown :

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

For detail you can refer the jQuery Documentation Page :jQuery slideDown

OR

You can try

$(window).load(function(){

instead of

$(document).ready(function(){

as few elements not be completely loaded at the time of $(document).ready(function(){

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top