CODEWITHSUNDEEP
javascriptjqueryhtml
user3610762
user3610762

Reputation: 437

Slidedown after page loading

Below is my code. i want - when the page is loading then the header class will not visible but after loading the page it will slide down. How can I do it? thank you.

HTML:

      <div class="header" style="width:100%;height:300px;background-color:#999">
      </div>

JS:

     $(document).ready(function() {
        $('.header').slideDown();
     });

Upvotes: 1

Views: 1357

Answers (2)

Chris Spittles
Chris Spittles

Reputation: 15359

You need to make the header display: none; with CSS first like this:

<div class="header" style="width:100%;height:300px;background-color:#999; display: none;">
  </div>

Then your JS will show it and perform the animation like in this fiddle:

http://jsfiddle.net/S8XjL/

If you mean after everything on the page has loaded you might want to change your JS to:

$(window).on("load", function(){
    $('.header').slideDown();
});

Using jQuery's ready function will cause the header to drop once the DOM is ready but not necessarily when the page has finished loading:

$(document).on("ready", function(){
    $('.header').slideDown();
});

Upvotes: 5

Raman Mandal
Raman Mandal

Reputation: 276

Just mention display:none in your CSS

<div class="header" style="width:100%;height:300px;background-color:#999; display:none">
          </div>

Upvotes: 1

Related Questions