web-dev-qa-db-ja.com

スムーズな画像のフェードアウト、srcの変更、jqueryによるフェードイン

私は次のことをしようとしています：

リンクをクリックすると：

1.）imgをフェードアウトします

2.）非表示になった画像のsrcを変更します

3.）新しいsrcのimgの読み込みが終了したら、フェードインします

最低限、ある画像のスムーズなフェードアウトと別の画像のフェードインを確認したい（同じimgタグ内でsrcを変更して）

最終的に私はしたい：

1.）imgをフェードアウトします

2.）アニメーションGIF「画像の読み込み」を表示する

3.）現在非表示になっている画像のsrcを変更します

4.）アニメーションGIF「画像の読み込み」を非表示にします

5.）新しいsrcのimgの読み込みが終了したら、フェードインします

ありがとう。

これは私がこれまでに試したことです。数回点滅するようですが、srcが変更された後（フェードアウトの前）に限ります。奇妙な振る舞い。

$("#Image").fadeOut();
$("#Image").attr("src", NEW_IMAGE_SRC);
$("#Image").fadeIn();

#ImageはIMGタグです

javascriptjqueryjquery-animatejquery-load
12
Brian David Berman

これを試して：

$('.click').click(function() {
   $('img.class').fadeOut(300, function(){
      $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){
         if (this.complete) $(this).fadeIn(300);
      });
   });
});
36
hohner