JQueryの覚え書き / 要素を順番にフェードしながら表示

ページを読み込む時のちょっとした演出として、任意の要素を順番にフェードさせながら表示させてみる。

110625.gif

要素については div でも良いのだけれど、今回は li を使って、上から順番にフェードインするようにしてみた。

仕組みとしては、クラス名「fadeInItems」の子要素であるすべての li に対して「fadeInNum1,fadeInNum2,~」とid属性値を付与。

次に付与されたid属性の要素に対して、まずは「hide()」で非表示にし「delay()」で時間差をつくり「fadeIn()」で表示させる。

これらを「each()」で繰り返し処理するといった感じ。

ちなみに、id属性は自動で付与するようにはしてみたけれど、その部分を除いてid属性を手動でHTML内に記述すれば任意の順番で表示させることも可能。

動作サンプル 1

それともう一つは、上から順番に表示するだけのシンプル版。
各要素にたいして特に属性値を持たせること無く、単純にクラス名「fadeInItems」の子要素であるすべての li に対して順番に処理して行くだけ。

動作サンプル 2

トラックバックURL

URL: http://blog.aru8tk.net/2011/06/jquery.html/trackback

コメント(1)

  • webdesign より:

    要素をフェードイン表示させるのに、背景画像を画面一杯に表示させる【bgstretcher】というプラグインと競合しているものが多かったのですが、こちらのスクリプトを使わせてもらったところ上手く動きました。
    ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。

CALENDAR
2011年6月
« 5月   7月 »
 1234
567891011
12131415161718
19202122232425
2627282930  
ARCHIVE
サイト内検索

since july 24, 2010