jQueryを使って、イメージのディゾルブチェンジをしたい（未達成）

素材として複数の画像ファイルがあって、それを次々にクロスフェードで差し替えつつ１つだけ表示させようと思ったがなかなか上手くいかない。
下準備として、イメージでタグでBaseとFrontの２つを用意し、CSSで全く同一のポジションに表示指せるようにしておく。

<img id='img_base' src=''>
<img id='img_front' src=''>

img{
  position: absolute;
  top : 50px;
  left : 0px;
}

$(function(){
  $('#img_base').show();
  $('#img_front').hide();
});

以下の手順をやったけど動かない

1. ページのロード時には、frontをhideしてBaseのみが表示
2. イベント発生時にフロントのsrcを仕込んでfadeInで表示させる
3. callbackで、baseのsrcをfrontと同じモノに差し替える
4. さらにcallbackでfrontをhideする
5. 繰り返し

この手順でいけるかと思ったけど、なぜか動かない。
jsdo.itを使ってみた。（ソースの貼り方がよく分からない）

JS image ディゾルブ - jsdo.it - share JavaScript, HTML5 and CSS

そういう事をするPlugInとかありそうだけど、無いような気がしなくもない。