Skip to Main Content
jQuery Pocket Reference
book

jQuery Pocket Reference

by David Flanagan
December 2010
Intermediate to advanced content levelIntermediate to advanced
160 pages
3h 31m
English
O'Reilly Media, Inc.
Content preview from jQuery Pocket Reference

Chapter 5. Animated Effects

One powerful feature of client-side JavaScript is that you can script the CSS styles of document elements. By setting the CSS visibility property, for example, you can make elements appear and disappear. With clever programming, you can even produce animated visual effects. Instead of just making an element disappear, for example, you might reduce the value of its opacity property over the period of a half-second so that it quickly fades away instead of just blinking out of existence. This kind of animated visual effect creates a more pleasing experience for users, and jQuery makes them easy.

jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. In addition to simple effects methods, it defines an animate() method for producing more complex custom animations. The sections below explain both the simple effects methods and the more general animate() method. First, however, we’ll describe some general features of jQuery’s animation framework.

For every animation, you need to specify a duration of time—in milliseconds or by using a string—for how long the effect should last. The string “fast” means 200ms. The string “slow” means 600ms. If you specify a duration string that jQuery does not recognize, or if you omit it, you’ll get a default duration of 400ms. You can define new duration names by adding new string-to-number mappings to jQuery.fx.speeds:

jQuery.fx.speeds["medium-fast"] = 300; jQuery.fx.speeds["medium-slow"] = 500; ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery and JavaScript Phrasebook

jQuery and JavaScript Phrasebook

Brad Dayley
Beyond jQuery

Beyond jQuery

Ray Nicholus
Head First jQuery

Head First jQuery

Ryan Benedetti, Ronan Cranley

Publisher Resources

ISBN: 9781449398958Supplemental ContentErrata Page