WEB

要素を順番にフェードインさせる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%)に行くまでのスピードを調節しています。

 

 

では。

CSS
RELATED POST