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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
      $(function(){ 
        $('.fade li').hide(); 
         });      
        var i = 0; 
        var int=0; 
       $(window).bind("load", function() { 
        var int=setInterval("doFade(i)",500); 
       }); 
      function doFade() { 
        var list = $('.fade li').length; 
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('.fade li').eq(i).fadeIn(800); 
            i++; 
       } 
</script> 

サンプルのHTMLのbody部分です。

<h1>jQuery fadein|memocarilog demo</h1>
<ul class="fade">
		<li><img src="1.jpg" alt="" /></li>
		<li><img src="2.jpg" alt="" /></li>
		<li>Lorem ipsum…(略)</li>
		<li><img src="3.jpg" alt="" /></li>
		<li><img src="4.jpg" alt="" /></li>
		<li><img src="5.jpg" alt="" /></li>
		<li>Lorem ipsum…(略)</li>
		<li><img src="6.jpg" alt="" /></li>
		<li><img src="7.jpg" alt="" /></li>
		<li><img src="8.jpg" alt="" /></li>
		<li>Lorem ipsum…(略)</li>
			<li><img src="9.jpg" alt="" /></li>
</ul>

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

body{
	background-color: #eee;
}
h1{
	font-size: 20px;
	font-style: italic;
	margin: 50px 0;
}
#container{
	width:800px;
	margin: 0 auto;
}
.fade li{
	width: 200px;
	height: 200px;
	padding: 10px ;
	display: block;
	float: left;
	overflow: hidden;
}
.fade li img{
	width: 190px;
	height: 190px;
	border: #fff solid 5px;
}

Related Article

No Comments & Tracbacks

Leave a Comment

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


*


Categorys

Tags

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