Hide, show, toggle, swipe, fade, and animate, wow!
Instance
-
JQuery Hide ()
-
Demonstrates a simple jQuery hide () method.
-
JQuery Hide ()
-
Another Hide () demo. How to hide some text.
<! DOCTYPE html>"/jquery/jquery-1.11.1.min.js" ></script><script>$ (document). Ready (function () { $ ("P" ). Click (function () { $ (this). Hide (); });}); </script>
<! DOCTYPE Html>"/jquery/jquery-1.11.1.min.js"></script><script type="Text/javascript">$ (document). Ready (function () {$ (". Ex. Hide"). Click (function () {$ ( This). Parents (". ex"). Hide ("Slow"); });});</script><style type="Text/css">Div.ex{background-color: #e5eecc;p adding:7px;border:solid 1px #c3c3c3;}</style>class="ex"><buttonclass="Hide"Type="Button"> Hide </button><p> Contact: Mr. Zhang <br/>North Third Ring Road -Number <br/>Beijing</p></div>class="ex"><buttonclass="Hide"Type="Button"> Hide </button><p> contacts: david<br/>Fifth Avenue $Number <br/>New York</p></div></body>JQuery Hide () and show ()With JQuery, you can use the Hide () and show () methods to hide and display HTML elements:
<! DOCTYPE Html>"/jquery/jquery-1.11.1.min.js"></script><script type="Text/javascript">$ (document). Ready (function () {$ ("#hide"). Click (function () {$ ("P"). Hide (); }); $("#show"). Click (function () {$ ("P"). Show (); });});</script>"P1"> If you click on the "Hide" button, I will disappear. </p><button id="Hide"Type="Button"> Hidden </button><button id="Show"Type="Button"> Display </button></body>Grammar:$ (selector). Hide (Speed,callback); $ (selector). Show (Speed,callback);
The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the hide or display is complete.
The following example shows the Hide () method with the speed parameter:
Instance$ ("button"). Click (function () { $ ("P"). Hide (1000);});
<! DOCTYPE Html>"/jquery/jquery-1.11.1.min.js"></script><script type="Text/javascript">$ (document). Ready (function () {$ ("Button"). Click (function () {$ ("P"). Hide ( +); });});</script>"Button"> Hide </button><p> This is a paragraph. </p><p> this is another paragraph. </p></body>JQuery Toggle ()With JQuery, you can use the toggle () method to toggle the Hide () and show () methods.
Displays the elements that are hidden and hides the displayed elements:
Instance$ ("button"). Click (function () { $ ("P"). Toggle ();});
<! DOCTYPE Html>"/jquery/jquery-1.11.1.min.js"></script><script type="Text/javascript">$ (document). Ready (function () {$ ("Button"). Click (function () {$ ("P"). Toggle (); });});</script>"Button"> Toggle </button><p> This is a paragraph. </p><p> this is another paragraph. </p></body>Grammar:$ (selector). Toggle (Speed,callback);
The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the function name that is executed after the toggle () method completes.
JQuery Effect Reference ManualFor a full view of the jquery effect, please visit the jquery Effect reference manual.
JQuery Effects-Hide and show