コントロールをフェードイン/フェードアウトする

コントロール(というか任意の要素)をフェードイン/フェードアウトするユーティリティを書きました。

• 一定時間放置するとフェードアウトして消えます。
• 特定の操作(マウスを動かすなど)をするとフェードインします。

仕組み

• タイマーを仕込んで一定時間後にフェードアウト。
• 任意の操作でフェードインする。(フェードイン関数を返すAPIがあり、それを任意のイベントハンドラに割り当てられる。)
• フェードイン後、再度、フェードアウトタイマーを設定。
• フェードイン、フェードアウトにはYahoo! UI Library: Animationを使う。

使い方

// フェーダーを作成。
var fader = new Fader( "ctrl", 1000*5 );

// マウスダウンでフェードインする。
window.onmousedown = fader.getFadeInFanction();

サンプルはこちら。

実装

依存モジュール。

<script src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script> 

実装。

/**
 * エレメントを一定時間後にフェードアウトする
 * @param {String} id エレメントID
 * @param {int} wait　フェードアウトまでの時間(ミリ秒で指定)
 */
var Fader = function( id, wait ) {
    this.id = id;
    this.elm = document.getElementById(id);
    this.wait = wait;
    
    this.tid = null;
    this.originaBlockStyle = this.elm.style.display;
    this.init();
};
Fader.prototype = {
    fadeIn: new YAHOO.util.Anim( "ctrl", {
      opacity: { to: 0.8 }  
    }, 0.1, YAHOO.util.Easing.easeOut),
    
    fadeOut: new YAHOO.util.Anim( "ctrl", {
      opacity: { to: 0.01 }
    }, 1, YAHOO.util.Easing.easeOut),
    
    init: function(){
        var thiz = this; 
        this.fadeOut.onComplete.subscribe(function(){
            thiz.elm.style.display = "none"; // フェードアウト終了後、非表示化する
        });
        this.fadeIn.onComplete.subscribe(function(){
            thiz.setFadeout(); // フェードイン終了後に、フェードアウトタイマーを設定。
        });
        this.setFadeout(); // 最初のフェードインを仕込む
    },
   /**
     * 指定時間後にフェードインする処理を取得する。
     */
    getFadeInFanction : function () {
        var thiz = this;
        return function() { 
            // フェードアウトがタイマーに設定されていれば破棄
            if ( thiz.tid != null ) {
                window.clearTimeout( thiz.tid );
                thiz.tid = null;
            }
            thiz.fadeOut.stop(); // フェードアウト中であれば停止
            thiz.elm.style.display = thiz.originaBlockStyle; // 強制的に表示。
            thiz.fadeIn.animate(); // フェードイン開始
        };
    },
    /**
     * 指定時間後にフェードアウトする処理を設定する
     */
    setFadeout : function () {
        var thiz = this; 
        this.tid = setTimeout(  function(){  
          thiz.fadeOut.animate();
        }, this.wait );
    }
};