【Javascript】YUI アニメーションwidth,height

YUI アニメーションwidth,height

---

1: height(高さ)
2: widthと組み合わせてみる
3: サンプル

前々回はYUIのダウンロード、 前回は、 YAHOO.util.Animクラスの第2引数、attributes に「width」を指定して、HTML要素の幅を動かすアニメーションを試してみました。

今回は、この第2引数、attributes に「width」以外のものを指定してみます。どんなふうに変わるでしょうか。 試してみましょう。

height(高さ)

前回はwidth(幅)でしたので、height(高さ)も試してみましょう。とりあえず、簡単なサンプルを見てみます。

このコードは次の通りです。

<script type="text/javascript"
        src="../../lib/yui/yui_2.2.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../lib/yui/yui_2.2.0/build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../lib/yui/yui_2.2.0/build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../lib/yui/yui_2.2.0/build/dom/dom-min.js"></script>

<script type="text/javascript">
function chgHeight(id){
	var myAnim = new YAHOO.util.Anim(
		id,
		{height:{from:10,to:150}},
		0.5,
		YAHOO.util.Easing.backBoth
	);
	myAnim.animate();
}
</script>

<style>
#test1{ width:200px;height:10px;background-color:#ddd;padding:10px }
</style>

<div id="test1">伸びます</div>
 
<form>
<input type="button" 
    value="高さが伸びます" 
    onclick="chgHeight('test1')">
</form>

前回との違いは、前回「width」を指定していた、 第2引数部分のプロパティが「height」に替わっているところです。つまり、たとえば前回なら、{width:{from:10,to:150}} のように書いていた部分が {height:{from:10,to:150}}となっているわけです。

これによって、「height」高さを、 「from」の値「10(px)」から「to」の値「150(px)」になるまで伸ばしていきます。fromとtoの値を変えればいろいろな変化をつけることができます。

(* 上記コードのscript要素のsecによるyahoo-min.jsなどのYUIライブラリ群読込み部分は、 前回の記事をご確認ください。)

伸ばす時間は、前回同様に第3引数へ指定し、ここでは「1」を指定していますので、1秒かけて伸びていきます。もし、 第3引数へ「10」と書けば10秒かけて動作するようになります。

また、その伸ばし方のアクションも、前回紹介したエフェクト YAHOO.util.Easing.backBothを使用しています。このEasingエフェクトについても、詳しくは、 前回の記事をご確認ください。

次に、このheightと、前回のwidthと組み合わせてみるとどうなるかを試してみます。

次ページ