YUI Library Home

YUI Library Examples: StyleSheet Utility: Animating multiple elements with StyleSheet

StyleSheet Utility: Animating multiple elements with StyleSheet

In this example, we'll use the Animation Utility in concert with StyleSheet to apply style changes to a group of elements in concert over time.

Starting from the existing <style> node

This example includes a <style> element with some basic styling for the demo. We give the <style> element an id which we'll reference when we instantiate the StyleSheet instance.

Use the onTween event from an Anim instance

We'll just be using a raw instance of YAHOO.util.Anim to leverage its timers and event structure. In particular, we'll subscribe to its onTween and onComplete custom events.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More StyleSheet Utility Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings