Animation Example - how to animate an element's font, border, and background color
/*
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;
}
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);
Animation Example - Colors
This example demonstrates how to animate an element's font, border, and background color.
Click anywhere to start animation.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat