jQueryでクロスフェードを簡単に？

Javascript

とりあえずライブラリとか使わずにクロスフェードさせてみた。

  1. 同じタイミングで下の画像をフェードイン、上のレイヤーの画像をフェードアウトさせる。
  2. 上のレイヤーの画像がフェードアウト完了後に、フェードインさせた画像と同じものを上のレイヤーに表示。

idがph03なら下の画像に既存のph03.jpgが入って、フェードインされるイメージ。

$('.btn').mouseover( //マウスオーバーでボタンにセットされてるidを取得して画像を差し替えるってことで
	function() {
		var id = $(this).attr('id');  //ボタンのidを取得
		var ph = "images/"+id+".jpg";　//取得したidからファイル名を生成
		$(".photo img.base").hide().fadeIn('slow').attr("src",ph); //下に画像をセットしてフェードイン
		$(".photo p.over-photo img.over").fadeOut('slow', //まず上のレイヤーの画像をフェードアウト
			function(){
				$(".photo p.over-photo img.over").show().attr("src",ph); //フェードアウト完了後に上のレイヤーに新しい画像(フェードインさせた画像と同じ)をセット
			}
		);
	}
);

<div class="photo">
  <img src="images/ph01.jpg" class="base" />
  <p class="over-photo"><img src="images/ph02.jpg" class="over" /></p>
</div>

<p class="btn" id="ph03">ボタン</p>

.photo {
	position:relative;
}
.over-photo {
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}

これであってるのかな？