jQueryのdelayとtableを使って画像にちょっと派手なフェードイン効果

１時間前くらいにふっと思いついたので、
ブログに記録しておこうかなと思います。

jQueryにはdelayというメソッドがあり、
これを使うことでそのあとのメソッドの動作を遅らせることができ、
アニメーションなどでこのメソッドは効果を発揮します。

今回はこのメソッドを利用して画像にちょっと変わったfadeInを実装してみようかと思います。
まずはデモから。

jQueryとtableで画像のフェードイン - jsdo.it - share JavaScript, HTML5 and CSS

この仕組みとしては、pタグで囲った画像と画像と同じ幅のテーブル要素を用意して、
一つのdivの中に入れておきます。
divにはposition:relativeを設定して、pタグ、tableにはabsoluteでtopとleftを0にして、
左上に合わせておきます。
tableの中のtdの数はお好みで。

    #box{position: relative;}
    table{width: 500px;position: absolute; top: 0;}
    td{width: 100px;height:100px;background-color:#000;}

こんな感じで。
HTML部分はこんな感じ。

<div id="box">
  <img src="sample.png">
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></div>

次にjQueryをつかう準備として、head内などで読み込んでおきます。

<script type="text/javascript" src="~~~/jquery.js"></script>

jsを書きます。

var base = 300;
var Delay = 1;
$(function(){
    $("td").each(function(){
        time = base * Delay;
        $(this).delay(time).animate({opacity:"0%"},1000);
        Delay = + 0.2;
        });
    });

やっていることとしては、tdの要素分透明度を変化させるプロパティopacityを0%にアニメーションさせています。
その時にanimateの前にdelayメソッドを付加して、前のtd要素より少しだけ遅くアニメーションが開始させるようにしています。

一つ目のtd
→　time = 300 * 1　→ 300ミリ秒後にアニメーション →Delay = 1 + 0.2

二つ目のtd
→　time = 300 * 1.2　→ 360ミリ秒後にアニメーション →Delay　= 1.2 +0.2

たった9行でこんなアニメーションを作成できるjQuery、素晴らしいですね^^