jQuery Succinctly: jQuery Effects


Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

This post is part of a series called jQuery Succinctly.
jQuery Succinctly: jQuery Plugins
jQuery Succinctly: jQuery and Ajax

Disable All jQuery Effect Methods

It is possible to disable all of the animating methods jQuery provides by simply setting the value of the off property to true.

When off is set to true, all the effect methods will not animate and will instead be hidden and shown immediately using the CSS rules display:none and display:block. You can turn the animation back on by passing the off property a false value.

Grokking the stop() Animation Method

It is often necessary to stop an animation currently in progress before starting another. For example, when using the custom mouseenter and mouseleave events (or hover() method), you may unintentionally trigger an element that is already animating due to a previous mouseenter or mouseleave event. This causes a buildup of queued animations, which results in a sluggish interface. To avoid this, simply use the stop() method to stop the current animation before starting a new one.

Remove the stop() methods from the code and roll the mouse over the element several times to see the ghost animations occur. Continuously rolling over the element in the page will result in animation buildup, which is typically not the desired result.

Notes: Additionally, it is possible to not only stop the current animation in the queue for the select element but also the entire queue by passing the stop() method a parameter of true. This will effectively stop all queued animations, active and inactive.

Determining if an Element Is Animating Using :animated

The custom :animated selector filter can be used to select elements that are currently animating. Below, I use this custom selector filter to add text to an animating <div> element.

Using show(), hide(), and toggle(), Without Animation

Using the show(), hide(), and toggle() methods with a parameter will cause the elements being shown or hidden to animate by changing CSS properties: height, width, opacity, margin, padding. It is possible to skip animations for hiding and showing elements simply by not passing any parameters. This changes how these methods adjust the visibility of an element. Affected elements will simply appear or disappear without any animation by adjusting the CSS display property instead.

Notes: The jQuery methods hide(), show(), toggle(), slideUp(), slideDown(), slideToggle(), when used on elements that have a CSS display value of inline, will be changed to display:block for the duration of the animation.

Grokking Sequential and Non-Sequential Animations

It is important to understand the difference between animations that happen simultaneously, and animations that occur in a sequential order over time. By default, when effect methods are chained, they are added to a queue, and each effect occurs one after another.

Using the animate() method, you can set animations to occur non-sequentially or at the same time by passing all the CSS property changes to a single animate() method call. In the code below, the <div> will animate its width and border left width at the same time.

Animate() is the Base, Low-Level Abstraction

The animate() method is the base method that is used to construct all the pre-configured animations-e.g. hide(), slideDown(). It provides the ability to change (over time) the values of style properties.

Here is what you need to know when using this method.

  • Only properties that take numeric values are supported. In other words, you can't animate the value of, say, the backgroundColor property (at least not without a plugin). Also, properties that take more than one value like backgroundPosition can't be animated.
  • You can animate CSS properties by using em and % where applicable.
  • Relative animations can be specified using "+=" or "-=" in front of the property value. This would, for example, move an element positively or negatively relative to its current position.
  • If you specify an animation duration of 0, the animation will immediately set the elements to their end state.
  • As a shortcut, if a value of toggle is passed, an animation will simply reverse from where it is and animate to that end.
  • All CSS properties set via a single animate() method will animate at the same time.

Grokking the jQuery Fading Methods

Three concepts need to be called out when using the fadeIn(), fadeOut(), and fadeTo() methods.

  • Unlike other effect methods, fading methods only adjust the opacity of an element. It is assumed when using these effect methods that any element being faded already has a height and width.
  • Fading animations will fade elements from their current opacity.
  • Using the fadeOut() method will fade an element from its current opacity, and then once 100% faded, it will change the CSS display property of the element to "none".

Each of the aforementioned points is illustrated in the code below.