A jQuery interaction widget enables visitors to your page to use a mouse (or trackpad or touchscreen) to control, modify, or in some other way play with a web page element. Here's a quick look at the available effects offered by jQuery UI:
blind
: Hides or shows an element as though the element was a window blind that you pull up or down. As an option, you can set the direction
property to up
, down
, left
, right
, vertical
, or horizontal
.
$('#my-div').toggle('blind',{direction: 'left'});
bounce
: Bounces an element up and down. As options, you can use the distance
property to set the maximum bounce height (in pixels), and the times
property to set the number of bounces.
$('#my-div').effect('bounce',
{
distance: 200,
times: 10
},
1500
);
clip
: Hides or shows an element by shrinking the element vertically from the top and bottom. Set the direction
property to horizontal
to clip the element horizontally.
$('#my-div').toggle('clip');
drop
: Hides or shows an element by fading the element out or in while simultaneously sliding the element left or right. As an option, you can set the direction
property to up
, down
, left
, or right
.
$('#my-div').toggle('drop',{direction: 'up'});
explode
: Hides an element by exploding it into pieces that fly off in all directions; shows an element by restoring the exploded pieces to their original configuration. You can set the pieces
property to the number of pieces to explode; the value should be a square, such as 16
or 25
(the default is 9
).
$('#my-div').toggle('explode',{pieces: 16});
fade
: Hides or shows an element by fading the element out or in.
$('#my-div').toggle('fade', 'slow');
fold
: Hides an element by first shrinking it vertically to a 15-pixel height (the first “fold”), and then shrinking it horizontally until it disappears (the second “fold”); shows an element by reversing the folding procedure. For options, you can use the size
property to set the height, in pixels, after the first fold (the default is 15
); you can set the horizFirst
property to true
to make the first fold horizontal rather than vertical.
$('#my-div').toggle('fold',{size: 50});
highlight
: Highlights the background of an element. Use the color
property to specify the highlight color as an RGB triplet (the default is #ffff99
).
$('#my-div').effect('highlight',{color: 'ffd700'});
puff
: Hides or shows an element by scaling the element larger or smaller while simultaneously fading the element out or in. Add the percent property to set the maximum scale percentage (the default is 150
).
$('#my-div').toggle('puff',{percent: 200});
pulsate
: Pulsates an element by quickly oscillating its opacity between 0
and 1
. Use the times
property to set the number of oscillations (the default is 5
).
$('#my-div').effect('pulsate',{times: 10});
scale
: Grows or shrinks an element. For options, you can set the direction
property to horizontal
, vertical
, or both
(the default); you can use the origin
property to set the vanishing point as an array of the form ['<em>h</em>','<em>v</em>']
, where h
is top
, middle
, or bottom
, and v
is left
, center
, or right
(the default is ['middle','center']
); you can use the percent
property to set the scale
factor; and you can set the scale property to box
, content
, or both
(the default).
$('#my-div').effect('scale',{percent: 25, origin: ['top','left']});
shake
: Shakes an element horizontally or vertically. As options, you can set the direction
property to either left (the default) or right for a horizontal shake, or to up
or down
for a vertical shake; you can use the distance
property to set the shake displacement, in pixels (the default is 20
); and you can set the times
property to set the number of shakes (the default is 3
).
$('#my-div').effect('shake',
{
distance: 10,
times: 10
},
1000
);
size
: Changes the dimensions of an element to a specified width and height. You set the new dimensions by adding the to
property as an option and setting it to an object literal that specifies the width
and height
, in pixels. You can also use the origin
property to set the resize fixed point as an array of the form ['<em>h</em>','<em>v</em>']
, where h
is top
, middle
, or bottom
, and v
is left
, center
, or right
(the default is ['top','left']
); and you can set the scale
property to box
, content
, or both
(the default).
$('#my-div').effect('size',{to: {width: 200, height: 100}});
slide
: Hides or shows an element by sliding it out of or into the viewport. For options, you can use the direction
property to set the direction of the slide to left
(the default), right
, up
, or down
; you can use the distance
property to set the length of the slide, in pixels (the default is the width of the element if direction
is left
or right
, or the height of the element if direction
is up
or down
).