Search within TutorialsPark

jQuery UI Effects : Visual Effects


Learn how to use jQuery UI basic Effects


jQuery UI Effects : Visual Effects

The jQuery UI provides a rich set of visual effect which can be applied to the document to create great effects. eg controlling the opacity, height, toggle, fade etc.

The effects available are too compact and have not much options and methods, and can be applied easily with minimum configurations.


jQuery UI Effects : The effect() Method

The jQuery UI Method effect(effectName, options, duration, callback) is used to apply a named animation effect to an element. A number of events also support show and hide effect using method for the same.

Table: jQuery UI Effect Method Parameters

Parameter Description
effectName A String to specify the effect to be used.
options Setting specific to an Effect, eg a callback function
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.

jQuery UI Visual Effects : blind Effect

The jQuery UI Visual Effect of blind is used to either hide or display a element, making it appear or disapper in the specified direction.

Table: jQuery UI Bind Effect Options for Bind Effects

Option Description
mode A mode to show or hide the element. The default value is hide
direction To set the direction in which the element moves to/from while showing and hiding. The default value is vertical

Example: jQuery UI Effects - blind Method

Give it a TRY! » Note:In the demo, the image hides horizontally while shows vertically.


jQuery UI Effects : Bounce Effect

The jQuery UI bounce effect is used to make the element appear bounce vertically or horiontally while its is shown or hidden.

Table: jQuery UI Effect Bounce

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:Try with different values for options


jQuery UI Effects : Shake

The jQuery UI Effects of shake is used to make elements appear to shake vertically or horizontally, as they show or hide.

Table: jQuery UI Effect Bounce

Option Description
direction To set the direction of oscillation: "up" , "down" , "left" or "right". Default value is "left"
distance To set the distance in terms of pixels covered during each oscillation. The default value is 20 pixels
times To set the number of oscillations during effects. The default value is 3

Example: jQuery UI Effect shake

Give it a TRY! » Note: Try for different values to see effects.


jQuery UI Effects : The clip Effect

The jQuery UI Effect of clip is used to show or hide elements by scrolling then vertically or horizontally.

Table: jQuery UI Effect Clip

Option Description
mode To either show or hide the element. Default value is hide
direction To set the direction, either horizontal or vertical of the elements appearance or disappearance.

Example: jQuery UI Effect Clip

Give it a TRY! » Note:During the Effect the first element is hidding while the second appears.


jQuery UI Effects: Drop

The jQuery UI Effect of drop is used to show or hide the elements by dragging and lowering its opacity.

Table: jQuery UI Effect Drop

Option Description
mode To either show or hide the element. Default value is hide
direction To set the direction of the movement, possible values are up, down , left and right
distance To set the distance (in pixels) covered by the element.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: The first element appears while the second element disappears


jQuery UI Effects : fold

The jQuery UI Effect of fold is used to show or hide the element by progressing horizontally, and then vertically, or vice versa.

Table: jQuery UI Effect fold

Option Description
mode To show or hide the element. The default value is hide
horizFirst When set to true, the effect begins with horizontal progression
size To set the number of pixels of the first progression(horizontal or vetical). The default value is 15 pixels

Example: jQuery UI Effect Fold

Give it a TRY! » Note: The order of fold is set using horizFirst option.


jQuery UI Effect : Highlight

The jQuery UI Effect of highlight is used to show or hide elements by changing its background color.

Table: jQuery UI Effect highlight

Option Description
mode To show or hide the element. The default value is show
color To set the initial background color of the element, which transitions to get to the original background color.

Example: jQuery UI Effect Highlight

Give it a TRY! » Note: The first paragraph hides while the second shows


jQuery UI Effects : Puff

The jQuery UI Effect of puff is used to show or hide the element by enlarging or shrinking it and altering its opacity.

Table: jQuery UI Effect puff

Option Description
mode To show or hide the element. Default value is hide
percent To set the percentage magnification of element. The default value is 150%

Example: jQuery UI Effect Puff

Give it a TRY! » Note:The first image appears by returning to normal size, while the second image gets bigger while it hides.


jQuery UI Effect : Pulsate

The jQuery UI Effect of pulsate is used to make the element flash. The number of flashes is set using the option times. The blink time is set using duration option.

Example: jQuery UI Effect Pulsate

Give it a TRY! » Note: The first pulstates 3 times , while the second pulsates 6 times.


jQuery UI Effect : Scale

The jQuery UI Effect of scale is used to enlarge and shrink the element. It can also enlarge and shrink the element based on the option mode.

Table: jQuery UI Effect Scale

Option Description
mode To show or hide the element. The default value is effect, i.e only scaling effect is performed.
direction To specify the direction of resizing : "horizontal", "vertical" or "both". The default value is "both"
from An object (width, height) to specify the original dimensions of the element. By default, the current size of the element is taken as the
percent To set the percentage to magnify(>100) or shrink(less than 100%). The default value is 0 if value is hide, or 100 is value is show
fade With value as true, changes the opacity of the element while resizing. The default value is false

Example: jQuery UI Effect Scale

Give it a TRY! » Note: The first image appears while scaling, while the second one disappears.


jQuery UI Effect : Size

The jQuery UI Effect of size is used to apply a new height and width to the element, this is done using the option to with the values of width and height.

If either the width or height is not specified, the element does not get expanded in that direction.

Example: jQuery UI Effect Pulsate

Give it a TRY! » Note:THe image is expanded to 500px in width, while the height is kept static at 200 pixels.


jQuery UI Effect : Slide

The jQuery UI Effect of slide is used to show or hide elements by sliding them across the screen.

Table: jQuery UI Effect Scale

Option Description
mode To show or hide the element. The default value is "hide"
direction To specify the direction of the movement. Possible values are "up" , "down" , "left" or "right". Default value is "left"
distance To set the distance covered by the element in pixels. The default is the height of the element(for directions as up and down), or width of the element if directions is left or right

Example: jQuery UI Effect Slide

Give it a TRY! » Note: The first image slides out while the second one slides in.


jQuery UI Effect : Explode

The jQuery UI Effect of explode is used to show or hide elements by exploding them on the screen.

Table: jQuery UI Effect Explode

Option Description
mode To show or hide the element. The default value is "hide"
pieces To specify the number of pieces of the exploded element.The default value is 9

Example: jQuery UI Effect Explode

Give it a TRY! » Note: Try of different values to understand