OBSOLETE?

These methods are marked deprecated as of Dojo 0.3! Use lfx? instead!

While Dojo allows you to do Animation with varying degrees of complexity, there are also pre-built animation effects that are helpful for everyday use. If there are any pre-built animations not available that you'd like to see, suggestions are welcome on the AnimationWishlist.

All methods are available under dojo.fx.html (i.e. dojo.fx.html.fadeOut). The standard practice is to return the animation object. For implementation details, view fx/html.js in the repo.

All effects return the animation object used to create them. What does that mean for you? You have the full power to control, tweak, or listen in on the animation as it goes!

Fading (opacity)

fadeOut(node, duration, callback)

Fade a node from its current opacity to 0 over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

dojo.fx.html.fadeOut(dojo.byId("elm"), 1000, function(node) {
	node.style.display = "none"; // take the element off the page
});

fadeIn(node, duration, callback)

Fade a node from its curent opacity to 100%* over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

dojo.fx.html.fadeIn(dojo.byId("elm"), 2000);

* Technically, we are setting the opacity to 0.999999 (or 99.9999%) since setting it to 1 causes the element to flash in many browsers.

fadeHide(node, duration, callback)

Fade a node from its current opacity to 0 over a given duration (in milliseconds) and then sets the it's display to none. Optionally, you can run a callback function at the end of the animation.

dojo.fx.html.fadeHide(dojo.byId("elm"), 1000);

fadeShow(node, duration, callback)

Fade a node from 0 to 100% over a given duration (in milliseconds). It also sets the display to block. Optionally, you can run a callback function at the end of the animation.

dojo.fx.html.fadeShow(dojo.byId("elm"), 1000);

fade(node, duration, startOpac, endOpac, cbObj, callback)

Fade a node from opacity startOpac* to endOpac* over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

dojo.fx.html.fade(dojo.byId("elm"), 1000, 0.4, 0.8);

* Value between 0 and 1. Setting either of these to 1 (or higher) will set the opacity to 0.999999.

Sliding

slideTo(node, endCoords, duration, callback)

Slide a node from its current position to endCoords (2D array [x,y]) over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

// move to (300, 100)
dojo.fx.html.slideTo(dojo.byId("elm"), [300,100], 500, function(node) {
	node.style.border = "2px solid red"; // pointless node modification example
});

slideBy(node, coords, duration, callback)

Slide a node from its current position by coords (2D array [x,y]) over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

// move by (-100, 100)
dojo.fx.html.slideBy(dojo.byId("elm"), [-100, 100], 500);

slide(node, startCoords, endCoords, duration, callback)

Slide a node from startCoords (2D array [x,y]) to endCoords over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

// move from (100, 100) to (300, 400)
dojo.fx.html.slide(dojo.byId("elm"), [100,100], [300,400], 500);

Background highlights

colorFadeIn, colorFadeFrom, highlight(node, startRGB, duration, delay, callback)

Fade a node's background color from startRGB to its current background color over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

// fade from #ffc (255,255,204) to node's bg color in 1/2 second after a 2 second delay
dojo.fx.html.highlight(dojo.byId("elm"), [255,255,204], 500, 2000);

colorFadeOut, colorFadeTo, unhighlight(node, endRGB, duration, delay, callback)

Fade a node's background color from its current background color to endRGB over a given duration (in milliseconds). Optionally, you can run a callback function at the end of the animation.

// fade from node's bg color to red (255,0,0) in 1/2 second after a 2 second delay
dojo.fx.html.colorFadeTo(dojo.byId("elm"), [255,0,0], 500, 2000);

colorFade(node, startRGB, endRGB, duration, callback, dontPlay)

Fade a node's background color from startRGB to endRGB over a given duration. Optionally, you can run a callback function at the end of the animation and you can also set dontPlay to true to prevent the animation from auto-starting (you can then use the return value of the animation to manually play the animation).

// fade to black...
dojo.fx.html.colorFade(dojo.byId("elm"), [255,255,255], [0,0,0], 1000);

// don't start the fade
var fadeAnim = dojo.fx.html.colorFade(dojo.byId("elm"), [255,255,255], [0,0,0], 1000, null, true);
...
fadeAnim.play();

Notes:

dojo.byId is shorthand for document.getElementById

Since most

dojo.graphics.color.hex2rgb("#ffc");
dojo.graphics.color.hex2rgb("#ddfe04");
dojo.graphics.color.hex2rgb("ccc"); // '#' isn't required.
dojo.graphics.color.hex2rgb("334231");

Of course, we offer dojo.xml.domUtil.rgb2hex(r, g, b) as well. That method returns the color in the format #aa423a.

See also: Animation