How to use jQuery UI for advanced effects

If you want to create more complicated effects, it is certainly possible using the animate method. This might be for a web application that needs to animate a whole range of CSS properties on an element, or perhaps there is a special way a dialog box must disappear when closed—say, for instance, explode away on the screen (see Figure 7.2).

Figure 7.2. The explode effect running against the div.box element

Download the jQuery UI library from http://jquery-cookbo...ueryui-download. The library can now be included after jQuery is included and the new effects plugin is available.

For this solution, I have added an extra button to show two effects and added a new class to our CSS.

.big {

 font-size: 400%;

 width: 500px;

 height: 500px;

 line-height: 100%;

}

$(document).ready(function () {

 $('#animate').click(function () {

	$('.box').toggleClass('big', 2000);

 });



 $('#effect').click(function () {

	$('.box').effect('explode', null, 2000);

 });

});

The jQuery UI effects library also modifies the way addClass, removeClass, and toggleClass work; in particular, you can supply a duration as the second parameter, and it will animate a transition from the current state to the new class, working through all new class properties.

So, the first example adds the class big and sets the animation to run for two seconds. All the CSS properties from the big class are animated onto the div.box element. Because the toggleClass method has also been modified by jQuery UI, we are able to toggle back and forth to the original state.

Second, we are using the effect() method, which is bespoke to the jQuery UI library. This method offers a collection of show and hide functions.

Using the string explode, the div.box will split into nine pieces and fade off the page as shown earlier in Figure 7.2.

To see all the different available effects, you can visit http://jquery-cookbo...queryui-effects and play with all the interactive demos.