jQueryのfadeInを使ってみる

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

サンプル

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

もう一度、動作を見る

設置コード

まずは、htmlソースのhead内でjqueryを読み込みます。
[php]<script type=’text/javascript’ src=’jquery-1.6.1.min.js’></script>
[/php]

今回の動作を設定している以下のソースをhtmlソース内に適当に配置します。
[php]
<script type="text/javascript">
jQuery(function() {
// <div class="fadein">要素の内容を5000ミリ秒かけてフェードイン
jQuery(‘div.fadein’).fadeIn(5000, function() {
});
});
</script>[/php]

フェードインさせたい箇所に以下のような設定をします。[php]
<div class="fadein" style="display:none;">
５秒かけて、だんだんフェードインしてきます。
</div>
[/php]