読者です 読者をやめる 読者になる 読者になる

When it’s ready.

出来るまで出来ない

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

素材として複数の画像ファイルがあって、それを次々にクロスフェードで差し替えつつ1つだけ表示させようと思ったがなかなか上手くいかない。
下準備として、イメージでタグでBaseとFrontの2つを用意し、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とかありそうだけど、無いような気がしなくもない。