How to Apply a jQuery UI Effect

jQuery offers half a dozen animation effects: hide(), show(), fadeOut(), fadeIn(), slideUp(), and slideDown(), as well as their toggle versions: toggle(), fadeToggle(), and slideToggle(). That's a decent palette to work with, but apparently it wasn’t good enough for the jQuery UI team, who’ve stuffed no less than 14 extra animations into the Effects category.

Do you need all those effects? No, you don’t. As with all things related to animation, too little is always better than too much, so let moderation be your watchword. That said, there are some fun and interesting effects in the jQuery UI library, so perhaps there’s one (or, at most, two) that is just right for your project.

Applying a jQuery UI effect

Before you take a look at the available animations, let’s see how you apply them to an element. The most straightforward way is to use jQuery UI’s effect() method. Here’s the syntax:

$(<em>selector</em>).effect(<em>effect</em>, <em>options</em>, <em>duration</em>, function() {
  <em>Code to run when the effect is done</em>
});

• selector: A jQuery selector that specifies the web page element you want to work with.

• effect: A string that specifies the name of the jQuery UI effect you want to apply to the element.

• options: An object literal that includes one or more property-value pairs that specify the effect options you want to use. These options vary with the effect, but the most common property is easing, which sets the easing function. jQuery UI offers more than 30 easings.

• duration: The length of the effect, in milliseconds. You can also use the keywords slow (equivalent to 600ms) or fast (equivalent to 200ms). The default duration is 400ms.

• function(): A callback function that jQuery UI executes after the effect ends.

For example, the following statement applies jQuery UI’s bounce effect with a slow duration to the element that has an id value of my-div: $('#my-div').effect('bounce', 'slow'); The effect() method works best with effects that perform some action on an element, while leaving that element in place (such as bouncing the element). If you want to hide or show an element, then you're better off working with jQuery UI’s extensions to jQuery’s hide(), show(), and toggle() methods. These use the same syntax as the effect() method:

$(selector).hide(effect, options, duration, function() {
  Code to run when the effect is done
});
$(selector).show(effect, options, duration, function() {
  Code to run when the effect is done
});
$(selector).toggle(effect, options, duration, function() {
  Code to run when the effect is done
});