YUI Library JavaScript DHTML


            



    
Animating Multiple Attributes

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}






#demo {
    background:#ccc;
    margin-bottom:1em;
    height:100px;
    width:100px;
}




Animating Multiple Attributes


  This demonstrates how to animate multiple attributes of an HTMLElement using the YUI Animation Utility. Click the button to begin the demo.



Demo


run

(function() {
    var attributes = {
        height: { to: 50 },
        width: { to: 50 }
    };
    var anim = new YAHOO.util.Anim('demo', attributes);
    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });
    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();





   
   
yui_2.7.0b.zip( 4,431 k)