dojo/fx

Authors:Peter Higgins, Nikolai Onken, Marcus Reimann
Developers:Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles
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 and package is for. This module provides several commonly used animation effects and other utilities to manage animations. These FX functions all build upon the basic FX support in dojo/_base/fx. 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, its description, and examples.

NOTE: There is the Animation Tutorial, which is a better place to start then the Reference Guide.

Features

dojo/_base/fx

  • 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.
  • fadeIn() - A simple function for fading a currently invisible (opacity 0), node into view.
  • fadeOut() - A simple function for fading a currently visible (opacity 1), node to opacity 0.

dojo/fx

  • wipeIn() - Wipe in a node (height 0 to max height of node).
  • wipeOut() - Wipe out a node (max height to 0).
  • slideTo() - To slide a node from current position to ABS position x, y.
  • 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.
  • 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.

dojo/fx/easing

dojo/fx/Toggler

  • dojo/fx/Toggler - A helper class to wrap to simplify assigning two animations to a node, one for the show animation and one for hide animation. For example, fading a node in for show and out for hide.

See also

Error in the documentation? Can’t find what you are looking for? Let us know!