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

YUI アニメーションwidth,height

---

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

widthと組み合わせてみる

ここまでのサンプルでは、クラスYAHOO.util.Anim()にnew演算子を使ってインスタンス(ここではmyAnim)を作成する時に、 第2引数で与えるオブジェクトのプロパティに「height」と「width」を使って対象要素の高さと幅を個別にアニメーションしました。

今度は、それらを一度に設定してみます。 これまでは、下記のように、「width」なら「width」ひとつだけを書いていましたが、、、

     {width:{from:90,to:200}}

今回は、次のように「width」と「height」のオブジェクトリテラルを「,」で区切って羅列します。

     {width:{from:90,to:200},height:{from:10,to:200}}

これで、「width」と「height」の動作を同時にしたことになるわけです。

ちなみに、この第2引数は、newで作成されるインスタンス(ここではmyAnim)の 下のattributesオブジェクトとしてもアクセスできます。それぞれの意味するところは下記のようなプロパティとその値です。

     myAnim.attributes.width.from=90;
     myAnim.attributes.width.to=200;
     myAnim.attributes.height.from=10;
     myAnim.attributes.height.to=200;

また、一応参考までに、第3引数のアニメーション持続時間も次のように読み書きが可能です。

     myAnim.duration=10;

さらに、第4引数のEasingエフェクトも たとえば次のように書くことで、後からエフェクトメソッドを指定することができます。 ( *Easingエフェクトの種類については、 前回の記事をご確認ください。)

     myAnim.method=YAHOO.util.Easing.easeNone;

では、サンプルを見てみましょう。まず、高さと幅が同時にエフェクトするサンプルです。

サンプル

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

<script type="text/javascript">

 function chgWH2(id){
   var myAnim = new YAHOO.util.Anim(
     id,        {        width  : {from : 90 ,to: 200 } ,        height : {from : 20 ,to: 200 }       },
     0.5,
     YAHOO.util.Easing.backBoth
   );
   myAnim.animate();
 }
</script>

<style>
#test2{ width:90px;height:20px;background-color:#ddd }
</style>

<div id="test2">test2</div>
 
<form>
<input type="button" 
    value="高さと幅が伸びます" 
    onclick="chgWH2('test2')">
</form>

次のサンプルは逆に、高さと幅が0pxへ向けて縮み、最後には消えてしまうサンプルです。 CSSの指定で「overflow:hidden」を指定しているのがポイントです。この指定が無ければ消すことはできません。

サンプル

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

<script type="text/javascript">

 function chgWH3(id){
   var myAnim = new YAHOO.util.Anim(
     id,       {         width  : {from : 180 ,to:0 } ,        height : {from : 180 ,to:0 }       },
     1,
     YAHOO.util.Easing.backBoth
   );
   myAnim.animate();
 }
</script>

<style>
#test3{ 
  width:180px;height:180px;background-color:#ddd;overflow:hidden 
}
</style>

<div id="test3">test3</div>
 
<form>
<input type="button" 
    value="高さと幅が縮み、消えます" 
    onclick="chgWH3('test3')">
</form>

ここまでは、widthやheightのプロパティとして「from」と「to」を利用しました 、この「to」は絶対位置移動ですが、次回は、相対移動である「by」プロパティなどを使ってみます。

前ページ