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

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

ダウンロード

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


設定

 * 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>


関連記事

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

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

複数画像を切り替える ~ Slider Kit の使用(1) ~

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

自動再生で切り替える ~ Slider Kit の使用(2) ~

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