Search within TutorialsPark

jQuery UI Effects : show() hide() and toggle() Methods


Learn how to use jQuery UI Effect Methods to control Visual Effects


jQuery UI Effects : show() Method

The jQuery UI method of show(effect[,options][,duration][,complete]) is used to display the matched element, using custom effects.

Table: jQuery UI Effect Method show()

parameter Description
effect A string to specify the effect to be used for transition
options To set an Effect specific property and Easing
duration A string or a number to set time for which the animation would run. Eg: slow, fast, 100ms etc.
complete A function to be called when the animation is done.

Example: jQuery UI Effect Method - show()

Give it a TRY! » Note: The show() Method uses the effect fold


Table: jQuery UI show() Method Options

parameter Description
effect A string to specify the effect to be used for transition
easing A string to specify the easing effect to be used for transition
duration A string or a number to set time for which the animation would run. Eg: slow, fast, 100ms etc.
complete A function to be called once the animation is complete
queue A Boolean specifying whether to put the animation in the effect queue. If set as false, the animation will start immediately.

Table: jQuery UI Effects

effect Description
blind To hide and display item as they disappear or appear in the specified direction.
bounce To make the element appear to bounce vertically or horizontally as they appear or disappear.
shake To make elements appear to shake vertically and horizontally as they appear or disappear.
clip To show or hide element by scrolling horizontally and Vertically.
drop To show or hide the item by dragging and lowering its opacity.
explode To make the element appear or disappear in a burst, just like explosion.
fold To show or hide items by progressing horizontally and then vertically, or vice-versa.
highlight To show or hide elements by changing its background color.
puff To show or hide elements by enlarging or shrinking
pulsate To make the element flash
scale To enlarge or shrink the element.
size To set new height and width of the element.
slide To show or hide elements by sliding them across the screen

jQuery UI Methods : hide()

The jQuery UI method of hide() is used to hide matched elements using custom effects.

All options and settings are similar to method show()

Example: jQuery UI Methods - hide()

Example: jQuery UI Methods - hide()

Give it a TRY! » Note: jQuery has built in hide() method, even if jQuery UI is not loading fails, the method doesn't fail.


jQuery UI Methods : toggle()

The jQuery UI Method of toggle() is used to display or hide the matched elements, using custom effects.

All other options and parameters are similar as show() and hide() method

Table: jQuery UI Methods toggle()

Option Description
mode To show or hide element. The default value is "effect" , i.e only rebound effect is made.
direction To set the direction of rebound: "up" , "down" , "left" or "right". Default value is "up"
distance To set the distance in terms of pixels covered during each bounce. The default value is 20 pixels
times To set the number of bounces to be performed. The default value is 5

Example: jQuery UI Effects - Bounce Effects

Give it a TRY! » Note:The element is toggled using drop Effect.