要素を順番にフェードインさせるJavascript

こんばんは。

要素を順番に、ぼや~んと表示させるJavascriptを紹介いたします。

すごくショートコードでお手軽タイプです!

まず、ぼや~んと表示させたい要素を選びます。

複数を段階的にフェードインさせていく前提です。

  • tri3
  • tri2
  • tri1

仮に、こんな配置だとします。
ものっそいメチャクチャですが…


      
  • tri3
  • tri2
  • tri1

対象オブジェクトを複数指定するためにIDと、共通する要素であるliを指定しておいて、こちらのスクリプトを記述します。

    $(function(){  var delaySpeed = 300 ;  var fadeSpeed = 1500;    $('#num li').each(function(i){  	$(this).delay(i*(delaySpeed)).css({display:'block', opacity:'0'}).animate({opacity:'1'},fadeSpeed);  	});

これで上から順に浮き出てきます。

ちなみにdelaySpeedで、個々の表示のタイミングをずらしています

その下のfadeSpeedで、透過が0から1(100%)に行くまでのスピードを調節しています。

では。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする