The jQuery UI effects depends heavily on this file This file is utilizes by all other methods and can be also be used stand-alone. Please note that ui.core.js is not a dependency for the effects to work.
You can add animation in a number of ways , a lot of methods extends existing jQuery methods.
Basic effect transition
The easiest way to apply animation is by invoking effect() method on any element and set their attribute options, speed and callbackIf you want to use an animation with a hide, show or toggle effect , see the next section
Effect - Direct way to apply an animation to any element
These effect extend the base class API to bring visual transitions to the
standard hide, show and toggle visibility functions in jQuery. All the standard
animation types are supported.
Show - As an element is being shown, animate it's entrance
Hide - As an element is being hidden, animate it's exit
Toggle - As an element is being toggled between show or hide states, animate the transition
The jQuery UI effects core extends the animate function to be able to animate colors as well. These transitions can animate the background and border colors and accept colors specified in hex, rgb and color names. This is used extensively by the class transition effects in the next section.
Animate - Animate background and border colors
The jQuery UI effects core extends the base class API to be able to animate between classes. This is a very powerful way script complex animations because these effects analyze the differences between the style attributes of the classes and automatically builds parallel animations to transform between the various style attributes that are different. Any style attribute that contains a numeric value will be animated, from hex colors to dimensions, padding, margins, border thickness, positioning, font size, line-height and more will automatically animate.
addClass - Adds a class to elements with an animated transition between the states.
removeClass - Adds a class to elements with an animated transition between the states.
toggleClass - Adds a class if it is not present, and removes the class if it is present with an animated transition.
switchClass - Switches between one class and another with an animated transition.
Effects that can be used with Show/Hide/Toggle:
Effects that can be only used stand-alone:
To see arguments of these methods click here
Example : UIeffects.html
Learn from experts! Attend jQuery Training classes.
If you enjoyed this post then why not add us on Google+? Add us to your Circles
Liked it! Share this Tutorial
Discuss: jQuery UI effects
Post your Comment