<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Animation Example - how to animate an element's font, border, and background color</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0 */
body { margin:0; font:small arial; }
h1 { color:#666; margin:0; font:bold 150% palatino, georgia; }
#hd img { vertical-align:middle; }
#hd h1 { display:inline; margin:0 0 0 20px; vertical-align:middle; }
ul, li { margin:0; padding:0; list-style:none; }
#doc { margin:10px; }
#examples { margin:60px 40px; }
#examples li { margin-bottom:1em; }
#examples li a { color:#666; font:85% verdana; }
#demo { background:#ccc; font:100%/1.2em arial; width:10px; height:10px; }
#animation-demo-scroll #demo p { width:600px; }
#animation-demo-motion #demo { color:yellow; font-size:0; }
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo { background:#ccc; font:100%/1.2em arial; width:200px; height:200px; } #animation-demo-colors #demo { border:3px solid #c3c; }
#animation-demo-scroll #demo { width:400px; height:200px; overflow:auto; }
#animation-demo-colors #demo {
}
#target { background:red; font-size:0; position:absolute; left:300px;top:300px; width:10px; height:10px; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript"> YAHOO.example.init = function() {
var attributes = { color: { to: '#f00' }, backgroundColor: { to: 'rgb(0, 255, 0)' }, borderTopColor: { to: '#dcdcdc' }, borderRightColor: { to: 'dcdcdc' }, borderBottomColor: { to: 'dcdcdc' }, borderLeftColor: { to: 'dcdcdc' } }; var anim = new YAHOO.util.ColorAnim('demo', attributes); YAHOO.util.Event.on(document, 'click', anim.animate, anim, true); };
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init); </script> </head> <body id="animation-demo-colors"> <div id="doc"> <h1>Animation Example - Colors</h1> <p>This example demonstrates how to animate an element's font, border, and background color.</p> <p>Click anywhere to start animation.</p> <div id="demo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div> </div> </body> </html>
|