明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

jQuery で画面を暗転させる

画面の遷移やなんらかの効果を実装する際、いったん画面を暗転させて処理を施したいとします。 その場合、jQuery では以下のようなコードで実現できます。

暗転・明転

<html>
<head></head>
<body>
<div id="blackout"></div>
</body>
</html>

まず、暗転用の div 要素を用意します。 CSS で画面いっぱいに広げ、非表示としておきます。

div#blackout {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    background-color:#000;
}

ついでに、透明度(opacity)を0に。背景色(background-color)を黒(#000)にしておきます。 jQuery の記述は以下のような感じです。

<script>
function blackout() {
    $('div#blackout').show().animate({'opacity':1}, 500, 'swing', function() {
        $('div#blackout').animate({'opacity':0}, 500, 'swing', function() {
            $('div#blinklayer').hide();
        });
    });
}
</script>

jQuery の animate() メソッドを使って、div#blackout の opacity を 1 に上げます。 animate() メソッドの引数は animate('プロパティ', '時間(ミリ秒)', 'イージング', 'コールバック') となっています。 上記のコードでは500ミリ秒で暗転させ、それが完了したら再度 animate() メソッドを使って明転させています。

暗転の間に別の処理を行う

暗転している間に別の処理を行い、その後明転させるような汎用的な関数を用意してみます。

function blackout(callable) {
    $('div#blackout').show().animate({'opacity':1}, 500, 'swing', function() {
        if (callable !== undefined) callable();
        $('div#blackout').animate({'opacity':0}, 500, 'swing', function() {
            $('div#blinklayer').hide();
        });
    });
}
</script>

blackout() 関数にコールバック(callable)を渡せるようにしました。 暗転完了後、callable() を実行するようにしています。 実際の使い方は以下のような感じ。

<html>
<head></head>
<body>
<div id="aaa">Good Afternoon!</div>
<script>
$('#aaa').on('click', function() {
    blackout(function() {
        $(this).text("Good Evening..");
    }.bind(this));
});
</script>

要素 div#aaa に click のイベントハンドラで実行するイベントを実装しています。 画面を暗転させた後、div#aaa の要素内テキストを更新し、画面を明転させます。 コールバックの中で this を使うため、 .bind() を利用して this を束縛しています。