jQueryのfadeInを使ってみる

jQueryのfadeInを使って、適当なdiv要素なんかをfadeInを使ってフェードインさせてみます。 サンプルを設置していますので、動作を確認してみてください。

サンプル

５秒かけて、だんだんフェードインしてきます。

もう一度、動作を見る

設置コード

まずは、htmlソースのhead内でjqueryを読み込みます。

<script type='text/javascript' src='jquery-1.6.1.min.js'></script>

今回の動作を設定している以下のソースをhtmlソース内に適当に配置します。

<script type="text/javascript">
jQuery(function() {
  // <div  class="fadein">要素の内容を5000ミリ秒かけてフェードイン
  jQuery('div.fadein').fadeIn(5000, function() {
  });
});
</script>

フェードインさせたい箇所に以下のような設定をします。

<div class="fadein" style="display:none;">
５秒かけて、だんだんフェードインしてきます。
</div>