JQuery control element display, hide, switch, slide method summary, jquery slide

JQuery control element display, hide, switch, slide method summary, jquery slide

JQuery hide and display

Using the hide () and show () functions, jQuery supports hiding and displaying HTML elements:
Instance
Copy codeThe 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:
Copy codeThe 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
Copy codeThe 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:
Copy codeThe 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
Copy codeThe Code is as follows:
$ (". Flip"). click (function (){
$ (". Panel"). slideDown ();
});

JQuery Fade functions-fadeIn (), fadeOut (), fadeTo ()
JQuery has the following fade functions:
Copy codeThe 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:
Copy codeThe 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:
Copy codeThe 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
Copy codeThe Code is 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>

Function	Description
$ (Selector). hide ()	Hide selected elements
$ (Selector). show ()	Show selected elements
$ (Selector). toggle ()	Switch (between hide and display) the selected Element
$ (Selector). slideDown ()	Slide down (Display) the selected Element
$ (Selector). slideUp ()	Slide (hide) selected element up
$ (Selector). slideToggle ()	Switch the selected elements to move up and down
$ (Selector). fadeIn ()	Fade in selected Element
$ (Selector). fadeOut ()	Fade out selected Element
$ (Selector). fadeTo ()	Fades Out the selected element to a given opacity
$ (Selector). animate ()	Execute a Custom Animation for the selected Element