jQueryの短いコードでコンテンツをフェードインしながらふわりと読み込む方法

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%;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS