Skip to Main Content
jQuery Cookbook
book

jQuery Cookbook

by Cody Lindley
November 2009
Intermediate to advanced content levelIntermediate to advanced
480 pages
11h 50m
English
O'Reilly Media, Inc.
Content preview from jQuery Cookbook

Chapter 7. Effects

Remy Sharp

Introduction

Out of the box, jQuery comes with a number of preset effects and the robust low-level animation method for creating your own custom effects.

The preset effects include the following:

  • Hiding and showing elements in a toggle fashion

  • Scaling and simultaneously fading elements in and out of view

  • Sliding up and down and toggling

  • Fading in and out and to a specific opacity

All of the preset effects support speeds and callback functions to trigger upon completion.

In addition to these predefined effects, there are also a number of utilities that can help you take more control over your animations:

  • :animated selector to assess whether an element is in the process of being animated

  • The ability to turn off and on all effects across the board

  • The ability to add to the animation queue with your own bespoke functions

  • Function to change the entire queue of animations

Warning

It’s worth noting that the canned animation methods, hide (with a duration) and slideUp, reduce the margin and padding on the element as they approach zero height. This may affect how you want to mark up the page and CSS for your effect. Also note that jQuery doesn’t officially support effects in documents using QuirksMode.

Animate Method

Using the animate method gives you complete control over the animation to roll your own bespoke effect. Using the animate method, you can do the following:

  • Control CSS properties (limited to numerical properties only)

  • Control scrollTop and scrollLeft DOM properties ...

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 UI in Action

jQuery UI in Action

TJ VanToll
Head First jQuery

Head First jQuery

Ryan Benedetti, Ronan Cranley

Publisher Resources

ISBN: 9780596806941Supplemental ContentErrata Page