実験室

サンプル

コード

<style>
#sample {
	position: relative;
	width: 300px;
	height: 300px;
}
#sample div {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
}
#sample div:nth-child(1) {
	background: url(r.png);
	opacity:0;
}
#sample div:nth-child(2) {
	background: url(g.png);
}
#sample div:nth-child(3) {
	background: url(b.png);
}
</style>

<script>
jQuery(function(){
	var opa=[1, 0, 0];
	var cur=0;
	function changeAlpha(){
		var sum=0;
		for(var i=0; i<opa.length; i++ ){
			sum += opa[i];
		}
		if( sum === 1 ){
			cur = (cur+1) % opa.length;
			opa[cur]=1;
			$('#sample div:nth-child('+(cur+1)+')').animate({opacity: .5}, 1000);
		}else{
			for(var i=0; i<opa.length; i++ ){
				if( opa[i]===1 && i!==cur ){
					opa[i]=0;
					$('#sample div:nth-child('+(i+1)+')').animate({opacity: 0}, 1000);
				}
			}
		}
	}
	$('#sample div').css('opacity', '.5');
	
	setInterval(changeAlpha, 1000);
});
</script>