Chapter 6. Creating rich animations with effects
This chapter covers
- Building animations with effects
- Using effects in the jQuery UI widgets
- Animating CSS class name changes
jQuery UI includes 15 built-in animations, that provide ways to show and hide elements, draw the user’s attention to elements, or add visual appeal to your UIs. These effects stand on their own with the effect()method, tie into existing widgets such as dialog, and work with jQuery Core methods such as show() and hide(). But it doesn’t stop there. jQuery UI also adds powerful abilities to animate CSS class name changes, transition between colors, and a whole lot more.
The jQuery UI effects are so powerful they’ve helped inspire changes made to the CSS specification, and you can now perform transitions and animations directly in CSS. At the end of this chapter, you’ll explore what you can do with CSS directly, and compare that to the APIs in jQuery UI.
It’s important to note that just because jQuery UI lets you make an element explode into 50 pieces over 10 seconds (yes, you can do that), it doesn’t mean that you should. As we go through this chapter, we’ll discuss where these effects make sense for practical use.
Let’s get started with the core method of the jQuery UI effects: effect().