A Review of jQuery UI Interactions

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).