Animating Multiple Attribute

Ajax YUI Anim

次のExample、
Using Custom Units for an Animation(これ)は、属性（attributes）で単位（unit）を指定するだけなので、とばして、Animating Multiple Attributeへ。

この例は、複数の属性を指定するというだけなので、easingを変えて、動きを少し変更してみた。

<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 = {
	        height: { to: 50 },
	        width: { to: 50 }
	    };
	    var anim = new YAHOO.util.Anim('demo', attributes,
	    	    		1,YAHOO.util.Easing.backIn);

	    YAHOO.util.Event.on('demo-run', 'click', function() {
	        anim.animate();
	    });

}
</script>
</HEAD>

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

</BODY>
</HTML>

画面は、以下のような感じ。