jquery - 画像の入れ替え時に滑らかなトランジションを追加

Question

サムネイル付きの小さな画像ギャラリーと、拡大画像用のメイン ウィンドウがあります。サムネイルをクリックすると、ウィンドウに表示されるので完全に機能しますが、突然のスワップではなく、スムーズなフェードイン/フェードアウトの遷移を追加したいのですが、これを行う方法がわかりません。

これがコードペンです... http://codepen.io/anon/pen/uatGg

私の現在のjQueryコード...

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();

  var photo_fullsize =  $(this).find('img').attr('src');

  $('.woocommerce-main-image img').attr('src', photo_fullsize);

});

フェードインとフェードアウトを使用してみましたが、画像をフェードアウト (白い背景を表示) したくないので、新しい画像をフェードインします。画像を現在の画像の上にフェードインさせたいので、背景は移行時に表示されることはありません。