Skip to Content | Skip to Navigation


dojo.fx

Status:Draft
Version:1.0
Authors:Peter Higgins, Nikolai Onken, Marcus Reimann
Developers:Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles
Available:since V1.0

Have you ever wanted to nicely fade out or fade in a block of text, slide or wipe a DOM node into position, or even chain together numerous animations to provide a nice, dynamically changing page for your users? Well, that is exactly what the dojo.fx module is for. This module provides several commonly used animation effects. These FX functions all build upon the basic FX support in dojo base. There are also less commonly used FX functions available in dojox under the dojox.fx package.

This page is a landing point for reference off to each function, their description, and examples.

NOTE: There is a great quickstart animation guide to get you up and running with basic FX animations

Features

Functions always avalable (Dojo ‘Base’)

  • dojo.animateProperty - The most basic animation function in dojo. It allows you to animate the change of most CSS properties, as well as perform, pre and post operations as the animation executes. Almost all the following animation functions are built using this function.
  • dojo.fadeIn - A simple function for fading a currently invisible (opacity 0), node into view.
  • dojo.fadeOut - A simple function for fading a currently visible(opacity 1), node to opacity 0.

Functions provided by the dojo.fx module

  • dojo.fx.easing - A collection of easing functions that can be used with dojo.animateProperty and its extensions to modify an animation.
  • dojo.fx.wipeIn - Wipe in a node (Height 0 to max height of node).
  • dojo.fx.wipeOut - Wipe out a node (Max height to 0).
  • dojo.fx.slideTo - To slide a node from current position to ABS position x,y.
  • dojo.fx.Toggler - A helper class to wrap to simplify assigning two animations to a node, one for the ‘show’ animation and one for a ‘hide’ animation. For example, fading a node in for show and out for hide.
  • dojo.fx.chain - A helper function that can take two animation instances and combine them into a single animation instance where each of the input animations is run after the other in sequence.
  • dojo.fx.combine - A helper function that can take two animation instances and combine them into a single animation instance where each of the input animations are run in parallel.

See also