Animating From a Given Value

Ajax YUI Anim

次のサンプルは、タイトル通り、属性（attributes）にfrom属性をつけたもの。

簡単なサンプルなので、動きを２つ足してみた。
これで、ボタンクリックでのスライドイン/アウトが可能になる。

<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;
    overflow:hidden;
    width:200px;
    height:25px; /* これいれないとやっぱり縦にずれる */
}
</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() {

	// 1. 600=>0
	// 600から0まで、変化する。
	var attributes = {
	        width: { from:600, to: 0 }
	    };

	// Animオブジェクトのインスタンス化
	var anim = new YAHOO.util.Anim('demo', attributes);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run', 'click', function() {
	        anim.animate();
	});

	// 2. 0=>600
	// 0から600まで、変化する。
	var attributes1 = {
	        width: { from:0, to: 600 }
	    };

	// Animオブジェクトのインスタンス化
	var anim1 = new YAHOO.util.Anim('demo', attributes1);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run1', 'click', function() {
	        anim1.animate();
	});
	
	
}
</script>
</HEAD>

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

</BODY>
</HTML>

ここでもStyleにheight属性を付加している。

overflow: hidden;

で"Demo"は折り返さずに消えるのだが、、、

画面は以下のようになる。