• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/クロスフェードする へ行く。
• JavaScript/クロスフェードする の差分を削除

*関連 [#c3700a0d]
-JavaScript
-jQuery

*概要 [#f29ef545]
画像をクロスフェードさせます。

*方法 [#j3eb472c]
-index.html 
 <div class="key-visual">
 	<ul>
 		<li>
 			<a href="#">
 				<img src="images/key-visual-01.jpg" />
 			</a>
 		</li>
 		<li>
 			<a href="#">
 				<img src="images/key-visual-02.jpg" />
 			</a>
 		</li>
 		<li>
 			<a href="#">
 				<img src="images/key-visual-03.jpg" />
 			</a>
 		</li>
 	</ul>
 </div>

-style.css
 .key-visual {
 	width: 940px;
 	height: 220px;
 }
 
 .key-visual > ul {
 	position: relative;
 }
 
 .key-visual > ul > li {
 	display: none;
 	position: absolute;
 	top: 0;
 	left: 0;
 }
 
 .key-visual > ul > li:first-child {
 	display: list-item;
 }

-key-visual.js
 jQuery(function(){
 	var timeToFade = 1000;
 	var timeToWait = 4000;
 	var crossFade = function() {
 		var list = jQuery('.key-visual > ul');
 		var current = jQuery(list).children(':nth-child(1)');
 		var next = jQuery(list).children(':nth-child(2)');
 		jQuery(next).fadeIn(timeToFade);
 		jQuery(current).fadeOut(timeToFade, function() {
 			jQuery(this).remove();
 			list.append(this);
 		});
 		setTimeout(crossFade, timeToWait);
 	};
 	setTimeout(crossFade, timeToWait);
 });

*解説 [#fabf60a7]
クロスフェードしては後ろへ、クロスフェードしては後ろへ、です。


*参考 [#h378a3bd]
-
-
-http://d.hatena.ne.jp/prime503/20100112/1263279086