Using jQuery UI for Advanced Effects - J Query

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

The-explode-effect-running-against-the-div_box-element

(see Figure:The explode effect running against the div.box element).

Solution

Download the jQuery UI library from http://jquery-cookbook.com/go/jqueryui-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.

CSS

jQuery

Discussion
The jQuery UI effects library also modifies the way addClass, removeClass, and toggle Class 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.
The effect() method requires the option object passed in as the second variable; this can be null or it can be an empty object, but it must be provided to be able to pass in the duration.
Using the string explode, the div.box will split into nine pieces and fade off the page as shown earlier in Figure (The explode effect running against the div.box element).


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics