Animation Basic - tetsuya

Animation Exampleの最初（Basic)は、とてもシンプルなサンプル。

runボタンを押すと、矩形が短くなって消えてしまうというもの。

<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() {

	// 現在の幅（上のスタイルで定義；200px）から0まで、変化する。
	var attributes = {
	        width: { to: 0 }
	    };

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

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	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>

ここでは、Styleに

    height:25px;

というのを足している。id=demoのテキストを「demo」から「デモ」に変えたら、短くなったときにテキストが折り返されて、一瞬２行になる。上の一文で、折り返されるが高さは固定される。

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