アニメーション

Yahoo! UI LibraryのAnimationを使うと、要素のリサイズや移動といったアニメーションが簡単に実行できます。

利用準備

以下のファイルをインポートします。

...
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <script src="http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js"></script>
</head>
...

アニメーションオブジェクトを作成します。
- 引数で、アニメーションする要素、アニメーションの内容、アニメーション時間などを指定します。
アニメーションオブジェクトのanimate()でアニメーションが開始されます。

// フェードアウトするアニメーション
// 引数で、アニメーションする要素、アニメーションの内容、アニメーション時間などを指定する。
var fadeOut = new YAHOO.util.Anim("box", {
    opacity: { to: 0 } // 薄くする
}, 10, YAHOO.util.Easing.easeOut);

// animate() 関数を実行するとアニメーションが開始する。
fadeOut.animate();

確認はこちらから

参考:Animation Utility: Examples