jQuery UI has a number of different effects that can be applied to animations. These effects add additional functionality in addition to the effects that come with the jQuery core file.


List of jQuery UI Effects

The jQuery UI effects each have a set of default actions, but can be modified with various options. These effects  include:

♦ blind  the element will disappear from the bottom up, like a window blind.

♦ bounce  the element will bounce up and down, but does not disappear

♦ clip  the element will disappear top and bottom.

♦ drop  the element will slide off to the left and fade out.

♦ explode  the element will break into smaller boxes and expand,, then fade out.

♦ fade  the element will fade to nothing.

♦ fold  the element reduces in height and then reduces in width until it disappears.

♦ highlight  the background color on the element will flash to a bright yellow color.

♦ puff  scales up the element and removes it from view

♦ pulsate  the element pulsates in and out of view rapidly 5 times , but does not disappear

♦ scale  shrink or grow the element by the specified factor

♦ shake  shake the element back and forth 3 times quickly

♦ size  resize the element to a specified width and height

♦ slide  slide the element from left to right

♦ transfer transfers the outline of the specified element from its original location to a specified location


Required jQuery files

As with other jQuery UI widgets, you must load the UI library file along with your core jQuery .js file in the <head>...</head> section of your web page.

As always, you can choose to upload the required .js files to your own hosting server and link to them at your own site, or provide an external link to Google's jQuery library files.

<script src="https:/ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">


How to apply effects with jQuery UI

There are a couple different ways to apply these effects using jQuery. The first is to actually use the .effect() function like this example:


You can also use the effects as a parameter for other methods such as .toggle()


The effects can have other options included, and some of the effects require the options. Each effect has its own set of options, but all can have a duration amount applied and an additional function() attached to perform when the effect is completed.

    $("#box").effect("scale", {origin: ["middle", "center"],percent: 30, direction: "horizontal"});

    $("#box").effect("puff", {percent: 500}, 6000,function(){

 The complete documentation for .effect() can be found at: http://jqueryui.com/effect