0

リストをひとつずつ遅延表示させるjQuery

リストをひとつずつ遅延表示させるjQuery

同じような要素を並べて表示する箇所などで少しばかりリッチ感を出したいな~ってときに、各要素を遅延表示させたりすることで単純な一覧表示よりも動きがあっていいかもしれません。

jQueryを使ってリストを簡単に時間差で表示させてみたいと思います。

1.リストを遅延表示させる

 リストを遅延表示させる

HTMLを記述

 CSSを記述

 JavaScriptを記述

jQuery本体を読み込んだ後に下記を記述します。

 

デモサンプル

2.リストを遅延表示させる / 右から左へスライド表示

右から左へスライド表示

HTMLを記述

  JavaScriptを記述

 

デモサンプル

3.リストを遅延表示させる / 下から上へスライド表示

下から上へスライド表示

HTMLを記述

JavaScriptを記述

 

デモサンプル

4.リストを遅延表示させる / 上から下へスライド表示

上から下へスライド表示

HTMLを記述

 JavaScriptを記述

 

デモサンプル

解説

list-delay解説

 

JavaScritの中身を解説すると、はじめに対象となる要素を指定し、リストを「.css」で「opacity:0」透明表示にしておきます。そして、.each(function())で繰り返し実行したい処理(=今回は各リストを遅延させながら順番に表示したい)を記述します。「.delay(300*i)」で各リストを300ミリ秒ずつ表示開始時間をズラしています。「.animate({opacity:1}.1500)」は、後ろの数値(=1500)でアニメーションにかける時間を指定し、今回は「opacity:1」(透明だったリストを不透明にしています。)それをリスト要素の数だけ繰り返したいので、先程の「.each(function(i))」の引数に「i」を代入しそれぞれを300ミリ秒づつ時間差で表示するように指定をしています。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > リストをひとつずつ遅延表示させるjQuery