A summary of the methods for displaying, hiding, switching and sliding of jquery control elements _jquery

JQuery Hide and show

JQuery supports hiding and displaying HTML elements through the Hide () and show () two functions:
Instance

Copy Code code as follows:

$ ("#hide"). Click (function () {
$ ("P"). Hide ();
});
$ ("#show"). Click (function () {
$ ("P"). Show ();
});

Hide () and show () can be set with two optional parameters: Speed and callback.
Grammar:

Copy Code code as follows:

$ (selector). Hide (Speed,callback)

$ (selector). Show (Speed,callback)

The speed parameter sets the speed shown or hidden. You can set these values: "Slow", "fast", "normal", or milliseconds.
The callback parameter is the name of the function that was executed after the hide or show function was completed. You will learn more about callback parameters in the following sections of this tutorial.
Instance

Copy Code code as follows:

$ ("button"). Click (function () {
$ ("P"). Hide (1000);
});

The callback parameter is the name of the function that was executed after the function was completed. You will learn more about callback parameters in the following sections of this tutorial.

JQuery sliding Function-Slidedown, Slideup, Slidetoggle

JQuery has the following sliding functions:

Copy Code code as follows:

$ (selector). Slidedown (Speed,callback)
$ (selector). Slideup (Speed,callback)
$ (selector). Slidetoggle (Speed,callback)

The speed parameter can set these values: "Slow", "fast", "normal", or milliseconds.
The callback parameter is the name of the function that was executed after the function was completed. You will learn more about callback parameters in the following sections of this tutorial.
Slidedown () instance

Copy Code code as follows:

$ (". Flip"). Click (function () {
$ (". Panel"). Slidedown ();
});

jQuery Fade Function-fadeIn (), fadeout (), Fadeto ()
JQuery has the following fade functions:

Copy Code code as follows:

$ (selector). FadeIn (Speed,callback)

$ (selector). fadeout (Speed,callback)

$ (selector). Fadeto (Speed,opacity,callback)

The speed parameter can set these values: "Slow", "fast", "normal", or milliseconds.
The opacity parameter rule in the Fadeto () function weakens to the given opacity.
The callback parameter is the name of the function that was executed after the function was completed. You will learn more about callback parameters in the following sections of this tutorial.

JQuery Custom Animation

The JQuery function creates the syntax for a custom animation:

Copy Code code as follows:

$ (selector). Animate ({Params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that produce animations. You can set multiple properties of this type at the same time:

Copy Code code as follows:

Animate ({width: "70%", Opacity:0.4,marginleft: "0.6in", FontSize: "3em"});

The second parameter is duration. It defines the time to apply to the animation. The value it sets is: "Slow", "fast", "normal", or milliseconds.
Instance

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#start"). Click (function () {
$ ("#box"). Animate ({height:300}, "slow");
$ ("#box"). Animate ({width:300}, "slow");
$ ("#box"). Animate ({height:100}, "slow");
$ ("#box"). Animate ({width:100}, "slow");
});
});
</script>

$ (selector). Hide () Hide selected elements /td>

function	description
$ (selector). Show ()	Display selected elements
$ (selector). Toggle ()	Toggle (between hidden and displayed) the selected element
$ (selector). Slidedown ()	slide Down (show) selected elements
$ (selector). Slideup ()	slide Up (hidden) selected elements
$ (selector). Slidetoggle ()	toggle up and down of selected elements
$ (selector). FadeIn ()	fade in selected element
$ (selector). fadeout ()	fade selected element
$ (selector). Fadeto ()	fades the selected element to the given opacity
$ (selector). Animate ()	perform custom animations on selected elements