javascript - Hide div for some time - Stack Overflow

admin管理员组

文章数量:1341401

How can i hide one dive for 10 seconds or for 1 minute using jquery/jvascript before site loads?
I know about setTimeout function, but it is used for hide dive after some time. but i want to hide div before sites load.

How can i hide one dive for 10 seconds or for 1 minute using jquery/jvascript before site loads?
I know about setTimeout function, but it is used for hide dive after some time. but i want to hide div before sites load.

• javascript
• jquery
• html

Share Follow asked Sep 11, 2015 at 17:10 Pathik VejaniPathik Vejani 4,5011111 gold badges6565 silver badges109109 bronze badges 6

• 3 Think about it. Set it hidden to start in the CSS. – epascarello Commented Sep 11, 2015 at 17:11
• but after some time i want that dive back.. – Pathik Vejani Commented Sep 11, 2015 at 17:12
• once my whole site get load, after that, that div can be seen.. – Pathik Vejani Commented Sep 11, 2015 at 17:13
• 6 Duplicate: stackoverflow./questions/14636362/… or stackoverflow./questions/18634783/… (There are more, did you even look?) – Mogsdad Commented Sep 11, 2015 at 17:18
• 1 "but after some time i want that dive back.." So use a setTimeout and show it... – epascarello Commented Sep 11, 2015 at 17:25

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 5

1. You can hide initially using the css display:none
2. setTimeout() for setting a delay
3. show() for showing hidden element

Snippet :

setTimeout(function() {
  $('#hide').show()
}, 4000);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide" style="display:none">hidden</div>

Also you can use visibility in css

1. You can hide initially using the css visibility:hidden
2. setTimeout() for setting a delay
3. css() for showing hidden element

Snippet :

setTimeout(function() {
  $('#hide').css('visibility','visible')
}, 4000);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide" style="visibility:hidden">hidden</div>

This code will show the div once the document is ready.

$(document).ready(function() {
  $("#initalHidden").show();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="initalHidden" style="display:none">
  <h1>Hidden until loaded</h1>
</div>

make div display style to none
so it will be hidden before pageload

<div  id='target' style='display:none;'>This di will appear after 10 seconds  of page load</div>
<script>
   $(function(){
        setTimeout(function(){ showTarget(); }, 10000);
   });
   function showTarget(){
       $("#target").show();
   }
</script>

If it starts shown hide it,but better approach is to start hidden with CSS.

$(function() {
       var yourDiv = $("#yourDiv");
        yourDiv.hide();
        setTimeout(function(){
            $("#yourDiv").show();
        }, 10*1000);
    });

suppose a div which id is MyDiv will have the effect you are looking for,

first i will set the css of the MyDiv hidden or display to none

#MyDiv
{
 display : none; 
}

or

#MyDiv
{
visibility: hidden; 
}

then it will remain hidden until the site loads and you change it through javascript.

in javascript after the desired time you just grab the element and make it visible

example in jquery:

$("#MyDiv").show();

本文标签： javascriptHide div for some timeStack Overflow