jQueryのアニメーションfadeIn Out To

fadeInOut

100%75%50%25%0%

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#fadeInOut button").click(function(){

		$("#fadeInOut img:not(:animated)").fadeOut(1000,function(){

			$("#fadeInOut img").fadeIn(1000);

		});

	});

	$("#fadeTo input").click(function(){

		$("#fadeTo img").fadeTo(1000,$(this).attr("value"));

	});

});

</script>

<div id="fadeInOut" >

	<p><button>fadeInOut</button></p>

	<img src="http://www.naganoblog.jp/usr/webdesign/k_02.png" style="display:block" />

</div>

<div id="fadeTo" >

	<p>

		<label><input type="radio" name="fadeTo" value="1" />100%</label>

		<label><input type="radio" name="fadeTo" value="0.75" />75%</label>

		<label><input type="radio" name="fadeTo" value="0.5" />50%</label>

		<label><input type="radio" name="fadeTo" value="0.25" />25%</label>

		<label><input type="radio" name="fadeTo" value="0" />0%</label>

	</p>

	<img src="http://www.naganoblog.jp/usr/webdesign/k_04.png" style="display:block" />

</div>