JQuery control elements display, hide, switch, and slide methods

This article describes how to display, hide, switch, and slide jQuery control elements. This article describes hide (), show (), slideDown, slideUp, slideToggle, and fadeIn (), fadeOut (), fadeTo (), and other methods to use instances. if you need a friend, refer JQuery hide and display

Using the hide () and show () functions, jQuery supports hiding and displaying HTML elements:
Instance

The code is as follows:

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

You can set two optional parameters for hide () and show (): speed and callback.
Syntax:

The code is as follows:

$ (Selector). hide (speed, callback)

$ (Selector). show (speed, callback)

The speed parameter specifies the display or hide speed. You can set these values: "slow", "fast", "normal", or millisecond.
The callback parameter is the name of the function that is executed after the hide or show function is complete. You will learn more about callback parameters in the following sections of this tutorial.
Instance

The code is as follows:

$ ("Button"). click (function (){
$ ("P"). hide (1000 );
});

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

JQuery slide functions-slideDown, slideUp, slideToggle

JQuery has the following slide functions:

The code is as follows:

$ (Selector). slideDown (speed, callback)
$ (Selector). slideUp (speed, callback)
$ (Selector). slideToggle (speed, callback)

The speed parameter can be set to "slow", "fast", "normal", or millisecond.
The callback parameter is the name of the function that is executed after the function is completed. You will learn more about callback parameters in the following sections of this tutorial.
SlideDown () instance

The code is as follows:

$ (". Flip"). click (function (){
$ (". Panel"). slideDown ();
});

JQuery Fade functions-fadeIn (), fadeOut (), fadeTo ()
JQuery has the following fade functions:

The code is as follows:

$ (Selector). fadeIn (speed, callback)

$ (Selector). fadeOut (speed, callback)

$ (Selector). fadeTo (speed, opacity, callback)

The speed parameter can be set to "slow", "fast", "normal", or millisecond.
The opacity parameter in the fadeTo () function specifies that the given opacity is diminished.
The callback parameter is the name of the function that is executed after the function is completed. You will learn more about callback parameters in the following sections of this tutorial.

JQuery Custom Animation

Syntax for creating a custom animation using the jQuery function:

The code is as follows:

$ (Selector). animate ({params}, [duration], [easing], [callback])

The key parameter is params. It defines the CSS attributes of the generated animation. You can set multiple such attributes at the same time:

The code is as follows:

Animate ({width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em "});

The second parameter is duration. It defines the time used to apply the animation. It is set to "slow", "fast", "normal", or millisecond.
Instance

The code is as follows: