memocarilog

jQueryを使って、短いコードで素敵なエフェクトをかける事ができるコードを見つけたのでメモです。

コードの細かい解説が参考記事にあります。とても参考になりました！

サンプルを作りました。（サンプルデモ→”fadein｜memocarilog demo”）

使い方

ヘッド内で以下のようにjQuery本体とコードを読み込みます。
読み込む時間とフェードインの時間を指定できます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
    　 $(function(){ 
        $('#フェードインしてくる要素').hide(); 
         }); 
       
        var i = 0; 
        var int=0; 
       
       $(window).bind("load", function() { 
        var int=setInterval("doFade(i)",500); //読み込む時間を指定
       }); 
       
      function doFade() { 
        var list = $('#フェードインしてくる要素).length; 
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('#フェードインしてくる要素').eq(i).fadeIn(800); //フェードインの時間
            i++; 
       } 
</script>

”#フェードインしてくる要素”の箇所に #fade などフェードインさせたい要素を指定すれば完了です。
簡単に読み込み時に素敵なエフェクトをかけることができます。

サンプルのデモとコードです。

サンプルデモ；fadein｜memocarilog demo

サンプルのHTMLヘッドのjQuery部分のコードです。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('.photos li').hide();
});
var i = 0;
$(window).on("load", function() {
  var int=setInterval("doFade(i)",500);
});
function doFade() {
  var list = $('.photos li').length;
  if (i >= list) {
    clearInterval();
  }
  $('.photos li').eq(i).fadeIn(1000);
  i++;
}
</script>

サンプルのHTML部分です。

<h1>jQuery fadein｜memocarilog demo</h1>
<ul class="photos">
  <li><img src="images/p01.jpg"></li>
  <li><img src="images/p02.jpg"></li>
  <li><img src="images/p03.jpg"></li>
  <li><img src="images/p04.jpg"></li>
</ul>

サンプルのCSSコードです。

.photos{
  overflow: hidden;
}
.photos li{
  float: left;
  width: 25%;
  height: auto;
}
.photos li img{
  width: 100%;
}