On jquery show (), Hide (), toggle (), Slidetoggle () Usage and difference

Show (), Hide (), toggle (), Slidetoggle () is the basic animation function in jquery, look at these four seemingly simple, but interactive, powerful functions.

1.show () displays an element

There are four types of argument lists for the show () function, respectively

A. () No participation

B. (duration,complete) Duration: Duration [default 400ms] (value type can be string or number) {You can also use ' slow ', ' fast ', ' normal '} Complete: callback function (function to execute when animation completes)

C. (plainobject) Plainobject: Object Direct Amount or object created by the new object ()

D. (Duration[,esing][,complete]) easing: name of the erase effect to use (requires plug-in support). The default jquery provides "linear" and "swing". Complete: Well, you know.

A simple example

Html

<div id= "ClickMe" > click here
</div>

Jquery

$ (document). Ready (function () {
	$ ("#clickme"). Click (function () {
  $ ("#book"). Show (N)}) 
;

Show (with parameters): The dynamic effect is from left to right, while stretching from top to bottom, as shown in the following figure

2.hide () hides an element

The list of arguments for the Hide () function has the same four forms, and the argument style is the same as show ().

A simple example

Html

<div id= "ClickMe" style= "height:50px;width:98px;border:1px solid #000000 Text-align:center" > click here
</div>

Jquery

$ (document). Ready (function () {
	$ ("#clickme"). Click (function () {
  $ (#book). Hide (=)})
;

Hide (with parameters): Dynamic effect is from right to left, while shrinking from bottom to top

3.toggle () Show or hide an element

The biggest difference between toggle or sildetoggle and show or hide is that they both can toggle the visible state of the element by default, but show and hide change The visible state of the element and cannot be toggled. The Toggle argument list has four types, it has no parameterless list compared to show () or hide (), but adds a new (Showorhide), and if the argument is true, it becomes a parameterless show () function, otherwise it becomes the hide () function

A simple example

Html

<div id= "ClickMe" > click here
</div>

Jquery

$ (document). Ready (function () {
	$ (#clickme). Click (function () {
$ ("#book"). Toggle (function () {
// Animation complete.})})
;

Toggle: Consistent with show () when contracted, consistent with hide () effect when stretched

4.slideToggle () Show or hide an element

Remove the list of parameters that you just toggle, and the remaining three is the Sildetoggle parameter list style.

A simple example

Html

<div id= "ClickMe" > click here
</div>

Jquery

$ (document). Ready (function () {
	$ (#clickme). Click (function () {
  $ ("#book"). Slidetoggle (function () {
    //Animation complete.})})
;

Slidetoggle: Dynamic effect from the bottom of the first

Official API DOCUMENT

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

http://api.jquery.com/slideToggle/

Finally spit w3school, content or incomplete, a lot of things are not detailed, later or to official Internet cafes (XX Bureau, have the ability you even the Rice country website also to me, a corner of the faint sound .... ）