CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shareer
Shareer

Reputation: 101

Hiding div when page loads and display the same after few seconds

i have a div which i want to hide when the page loads and want to display the same after few seconds.how do i do this using jquery.

HTML CODE

<div id="bio1">
<div class="carousel_titles">
    <h6>Saul Yarmak</h6>
        <div class="ops">Chairman & CEO</div>
     </div>
     <div class="img_block wrapped_imgs">
        <img src="img/pictures/team1.jpg" alt="Tom" />
     </div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  </p>
</div>

Upvotes: 1

Views: 3113

Answers (4)

Maulik patel
Maulik patel

Reputation: 1601

Please try this Fiddle demo :-

css

#bio1 {
    display: none;
}

jQuery

 $(document).ready(function(){
    setTimeout( "jQuery('#bio1').show();",3000 ); // Display div after 3 second
});

DEMO

Upvotes: -1

Ohgodwhy
Ohgodwhy

Reputation: 50767

Start with it hidden:

#bio1{
    display:none;
}

When the page is ready, create a timeout function, then after 3000 MS (3 seconds), show the div.

$(document).ready(function(){
    setTimeout(function(){
        $('#bio1').show(1000);
    }, 3000);
});

Upvotes: 2

Manoj
Manoj

Reputation: 1890

Try this code:

DEMO

   $(document).ready(function() {  
    var hashes ="#a1_bio"; 
      $(hashes).hide();
        setTimeout(function()
                   {
                        $(hashes).fadeIn();
                   },2000)
    });

Upvotes: 1

Felix
Felix

Reputation: 38102

You should hide it by default using css:

#bio1 {
    display:none;
}

and then you can use delay() to show it after a few seconds:

$('#bio1').delay(3000).fadeIn();

Fiddle Demo

Upvotes: 4

Related Questions