Example of hide () method usage in jQuery, jqueryhide
This example describes the usage of the hide () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method can hide matching elements.
Usage of the hide () method:
If this method does not set a time limit for the hidden effect, the matching element will be instantly hidden. For example:
Copy codeThe Code is as follows: $ ("div"). hide ()
The code above can instantly hide all div elements.
If the method limits the time to hide the effect, the matching element is hidden in an elegant form within the specified event. For example:
Copy codeCode: $ ("div"). hide (2000)
The code above can hide all div elements within 2000 milliseconds (2 seconds.
This method can also trigger a callback function after the hiding is complete. For example:
Copy codeThe Code is as follows: $ ("div"). hide (2000, function () {alert ("I have hidden ")});
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> hide () function-helper's house </title>
<Style type = "text/css">
Div {
Color: blue;
Background-color: green;
Width: 100px;
Height: 100px;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# First"). click (function (){
$ (". First"). hide ();
})
$ ("# Second"). click (function (){
$ (". Second"). hide (2000, function () {alert ("I hidden ")});
})
})
</Script>
</Head>
<Body>
<Div class = "first"> </div>
<Div class = "second"> </div>
<Button id = "first"> instantly hide </button>
<Button id = "second"> elegant hiding </button>
</Body>
</Html>
The above code can trigger the callback function after it is hidden. A prompt box is displayed.
I hope this article will help you with jQuery programming.