第7回 エフェクト編連載:jQuery逆引きリファレンス(9/19 ページ)

» 2010年05月21日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 fadeInメソッドは、非表示状態にある要素(セット)をフェードインします。引数speedには、フェードイン効果を実行する時間(ミリ秒)、もしくは、あらかじめ決められた値として、slow、normal、fastのいずれかを指定します。引数fncは、フェードインが完了したときに実行するコールバック関数を表します。

 具体的な例も見てみましょう。以下は、ページ・ロード時にアイコン画像を5秒(=5000ミリ秒)かけてフェードインするサンプルです。

<script type="text/javascript">

$(function() {

  // <div>要素の内容を5000ミリ秒かけてフェードイン
  $('div').fadeIn(5000, function() {
    // 処理終了後にダイアログ表示
    window.alert('フェードイン完了');
  });
});

</script>

  ……中略……

<div style="display:none;">
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>

リスト111 アイコン画像を5秒かけてフェードイン(FadeIn.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


5秒後

リスト111の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。