tsukalogo0000

alt

jQueryで画像をフェードイン

いままで、フェードインって意識した事なかったけど、意外と使い方次第かな? と… Appleの公式ホームページは大きい画像にふんだんに使われている。 jqueryとしては、初歩的なもんだが、 例えば、画像スライド系の大きな仕掛けのスクリプトとが動いる場合、結構画像を読 む時に画像がだらしなく範囲外へ露出してしまう事がある。 そんな時これを実装すれば、読み込む際に画像が消えた状態なのできれいに演出できる。 head内でも記事内でもモジュールでもスクリプトが消されてしまわないならどこでもいい
サンプルページhttp://tsukapiko.minibird.jp/index.php/logout.html

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#fadein').fadeIn(2000);
    });
</script>

例の如く、joomlaでは、$はjqueryに置きかえる。 CSSは、事前に消して置かないと、フェードインできないので消しておく。ちなみに(2000)はフェードインに要する時間で、("slow")の場合””が必要で約1000レベルと同等の値となる。 htmlには下記を記す

<div id="fadein"></div>

cssには以下の様に要素を消しておいてjQueryでフェードイン。 ちまたでは事前に消しておくという指示を忘れている場合が多いようだ

/* 画像のフェードイン */
#fadein{
display:none;
}

テストを兼ねているのでスクリプトは、画像を入れたモジュールに直接書き込んでる。

最終更新 2012年 2月 19日(日曜日) 10:35
 

ADD_YOUR_COMMENT

YOURALIAS:
YOUREMAIL:
YOURLINK:
タイトル:
FULLTEXT: