【jQuery】フェードイン・アウトで表示する ～ Innerfade の使用　～

jQuery 
 * 画像でも文字でも、フェードイン・アウトで表示可能

ダウンロード

 * 一番下まで行って「jquery.innerfade.zip (XXX kb)」を押下。
http://medienfreunde.com/lab/innerfade/

デモ

http://miracle-ysdesign.com/test-sample/jquery-test/crossfade/Innerfade-with-jquery.html

設定

 * animationtype: アニメーションの種類 
  （’fade’ 又は ‘slide’ (デフォルト値は ‘fade’)）
 * speed: フェイドの速さ
  （ミリ秒 又は ‘slow’,'normal’,'fast’(デフォルト値は’normal’)）
 * timeout: フェイド間の時間の設定
  （ミリ秒(デフォルト値は2000））
 * type: スライドショーの種類
  （’sequence’,'random’,'random_start’(デフォルト値は’sequence’））
 * containerheight: 囲んだ要素の高さ
   (デフォルト値はauto)

サンプル

<html>
<head>
<title>sample</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#fadeIn01').innerfade({
		speed: 4000,
		timeout: 4000,
		type: 'sequence',
		containerheight: '220px',
	});
	$('#fadeIn02').innerfade({
		speed: 8000,
		timeout: 8000,
		type: 'sequence',
		containerheight: '220px',
	});
});
</script>
</head>
<body>
<ul id="fadeIn01">
<li>
	<img src="./images/mono/01.jpg" border="0" />
	<a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a>
	<img src="./images/mono/03.jpg" border="0" />
	<a href="http://jp.msn.com"> src="./images/04.jpg" border="0" /></a>
	<img src="./images/mono/05.jpg" border="0" />
	<a href="http://goole.co.jp"> src="./images/06.jpg" border="0" /></a>
</li>
<li>
	<img src="./images/01.jpg" border="0" />
	<a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a>
	<img src="./images/03.jpg" border="0" />
	<a href="http://jp.msn.com"> src="./images/04.jpg" border="0" /></a>
	<img src="./images/05.jpg" border="0" />
	<a href="http://goole.co.jp"> src="./images/06.jpg" border="0" /></a>
</li>
</ul>
<ul id="fadeIn02">
<li>
	<img src="./images/07.jpg" border="0" />
	<a href="http://yahoo.co.jp"> src="./images/mono/08.jpg" border="0" /></a>
	<img src="./images/09.jpg" border="0" />
	<a href="http://jp.msn.com"> src="./images/mono/10.jpg" border="0" /></a>
	<img src="./images/11.jpg" border="0" />
	<a href="http://goole.co.jp"> src="./images/mono/12.jpg" border="0" /></a>
</li>
<li>
	<img src="./images/07.jpg" border="0" />
	<a href="http://yahoo.co.jp"> src="./images/08.jpg" border="0" /></a>
	<img src="./images/09.jpg" border="0" />
	<a href="http://jp.msn.com"> src="./images/10.jpg" border="0" /></a>
	<img src="./images/11.jpg" border="0" />
	<a href="http://goole.co.jp"> src="./images/12.jpg" border="0" /></a>
</li>
</ul>
</body>
</html>

参考文献

http://news.mynavi.jp/articles/2007/11/30/innerfade/index.html

関連記事

複数画像を切り替える ～ jCarouselLite の使用　～

http://blogs.yahoo.co.jp/dk521123/24754786.html

複数画像を切り替える ～ Slider Kit の使用（１）　～

http://blogs.yahoo.co.jp/dk521123/26631495.html

自動再生で切り替える ～ Slider Kit の使用（２）　～

http://blogs.yahoo.co.jp/dk521123/27641589.html

自動再生で画像を表示させる ～ Photo Slider の使用　～

http://blogs.yahoo.co.jp/dk521123/27638967.html

複数の画像をスライドショーで表示する ～ Cycleの使用　～

http://blogs.yahoo.co.jp/dk521123/27660372.html

フェードイン・アウトで表示する ～ Innerfade の使用　～

http://blogs.yahoo.co.jp/dk521123/27646370.html