[Jquery tutorial] jquery Effect

Jquery hide and display

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

Instance

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

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

Syntax:

$ (Selector). Hide (speed, callback)

$ (Selector). Show (speed, callback)

SpeedThe parameter specifies the display or hide speed. You can set these values: "slow", "fast", "normal", or millisecond.

CallbackThe parameter is the name of the function that is executed after the hide or show function is completed. You will learn more aboutCallbackParameter knowledge.

 

Jquery Switch

The jquery toggle () function uses the show () or hide () function to switch the visible state of HTML elements.

Hide the displayed elements.

Syntax:

$ (Selector). Toggle (speed, callback)

SpeedThe parameter can be set to "slow", "fast", "normal", or millisecond.

Instance

$ ("Button"). Click (function (){
$ ("P"). Toggle ();
});
CallbackThe parameter is the name of the function that is executed after the function is completed.

 

Jquery Effect

Method	Description
Animate ()	Apply a "Custom" animation to the selected Element
Clearqueue ()	Remove all queued functions from selected elements (not running)
Delay ()	Set latency for all queuing functions (not running) of the selected Element
Dequeue ()	Run the next queuing function of the selected element.
Fadein ()	Fade in Selected elements to completely opaque
Fadeout ()	Fade out the selected element to completely opaque
Fadeto ()	Reduces the selected element to a given opacity.
Hide ()	Hide selected elements
Queue ()	Display the queuing function of the selected Element
Show ()	Show selected elements
Slidedown ()	Slide to display the selected element by adjusting the height
Slidetoggle ()	Switching between slide hiding and sliding display of Selected elements
Slideup ()	Slide to hide selected elements by adjusting the height
Stop ()	Stops running the animation on the selected element.
Toggle ()	Hide and display selected elements