web-dev-qa-db-ja.com

フェード効果を使用したjQuery Change Image src

サムネイル画像をクリックして、サムネイルへのリンクでメイン画像を置き換える効果を作成しようとしていますが、フェードインします。これは現在使用しているコードです：

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

これは機能し、フェード効果なしで画像を置き換えます。 fadeInエフェクトを機能させるには、何を変更する必要がありますか？

jqueryimagefade
39
WebDevDude

最初にfadeOut()にするか、非表示にする必要があります。

これを試して ：

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

画像をfadeOutし、非表示になったらsrcを変更してから、fadeInを変更する必要があります。

これはjsFiddleの例です。

編集：Sandeep Pal's anwser で、より新しい解決策を見つけることができます。

78
Sylvain

私はFadeInとfadeOutを使用する代わりに、fadeInとfadeOutが数マイクロ秒の間、それらの間に時間ギャップを作成したので、fadeTo機能を使用する方が良いです。

私はSylvainの上記のコードを使用しました：彼に感謝

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});
32
Sandeep Pal

上記のサンプルを再現しました。奇妙なちらつきが生じます。不透明度が1に復元された後、画像の読み込みを待機していることがわかりました。Sandeepによってコードを変更しました。

$("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on('load', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`
2
Aamir Hussain

既に100％アルファになっているものをフェードインすることはできません:)

つまり、フェードアウトするか、非表示にしてからフェードインします。

この例を作成しました。基本的に、非表示にしてからフェードします。

http://jsfiddle.net/uGFMt/

0
jackJoe