Animating Colors - tetsuya

先の「Chaining Animations Using onComplete」でも出てきたYAHOO.util.ColorAnimのExample。
AnimationのTopページで書かれているが、Yahoo.util.Animの子孫らしい。

サンプルとして挙げられているのは、簡単。
以下にソースを示す。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
#demo {
    background:#ccc;
    margin-bottom:1em;
    height:100px;
    width:100px;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/animation/animation-min.js" >
</script> 

<script type="text/javascript">

init = function() {

// 変化する色属性の定義
   var attributes = {
	        color: { to: '#06e' },
	        backgroundColor: { to: '#e06' }
	    };
   
// YAHOO.util.ColorAnimのインスタンス化
    var anim = new YAHOO.util.ColorAnim('demo', attributes);
    YAHOO.util.Event.on(document, 'click', function() {
       	anim.animate();
    });
	
}
</script>
</HEAD>

<BODY onload=init()>
<p>
<div id="demo">デモ</div>
</p>
<p>
<button id="demo-run">実行</button>
</p>

</BODY>
</HTML>

画面（実行後）は以下のようになる。