the difference between Display:none and Visible:hidden
Both Display:none and Visible:hidden can hide an element from the page, but there are differences:
Display:none---does not retain its physical space for the object being hidden, that is, the object disappears completely on the page, which is not visible or invisible.
Visible:hidden---Make an object invisible on a Web page, but the space occupied by the object on a Web page does not change, and in layman's terms it is invisible but palpable.
Example:
Copy Code code as follows:
The difference between <title>display:none and Visible:hidden </title>
<body >
<span style= "Display:none; Background-color:blue "> Hidden area </span><span style=" Background-color:green "> Display area </SPAN><BR/ >
<span style= "Visibility:hidden; Background-color:blue "> Hidden area </span><span style=" Background-color:green "> Display area </span>
</body>
how jquery is displayed and hidden
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script src= "Jquery_last.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {});
function Hiden () {
$ ("#divObj"). Hide (),//hide () function, hidden, with a time parameter (ms) in parentheses (milliseconds) such as Hide (2000) is hidden at 2000 milliseconds, and can take slow,fast
}
function Slidetoggle () {
$ ("#divObj"). Slidetoggle (2000);//curtain effect of the switch, point to collect, click Open, Parameters can not, parameter description ditto
}
Function Show () {
$ ("#divObj"). Show ()//display, parameter description ditto
}
function Toggle () {
$ ("#divObj"). Toggle (2000);//Show hidden switch, parameters can be no, parameter description ditto
}
function Slide () {
$ ("#divObj"). Slidedown ()//curtain effect unfold
}
</script>
<body>
<input type= "button" value= "Hide" onclick= "Hiden ()"/>
<input type= "button" value= "Display" onclick= "show ()"/>
<input type= "button" value= "Curtain effect display 2" onclick= "Slide ()"/>
<input type= "button" value= "Curtain effect switch" onclick= "Slidetoggle ()"/>
<input type= "button" value= "Hide display effect Toggle" onclick= "toggle ()"/>
<div id= "Divobj" style= "Display:none" >
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
-Test Examples <br/>
</div>
</body>
