jquery - 画像の切り替えとフェードを同時に行う

Question

ユーザーが小さなサムネイル画像をクリックすると、同じページに大きな div 要素が表示され、その画像が表示されます。これまでのところ、次のコードで機能します。

$(document).ready(function () {
    $("img#thumb").click(function () {              //when image with ID thumb is clicked change src 
    var imgpath = $(this).attr("src");
    $("img#cover").attr("src", imgpath);
});

});

ただし、ユーザーがクリックしたサムネイルに応じて、古い画像をフェードアウトさせながら、同時に新しい画像を切り替えたいと考えています。jQueryでsrcファイルを変数に保存することでクリックされたサムを追跡し、それを次を使用して新しいパスに配置します.attr()

これどうやってするの？

Answer 1

表紙の画像をフェードアウトするつもりだと思います。

それを試すことができる場合：

$("img#cover").fadeOut();
$("img#cover").attr("src", imgpath);

Answer 2

これがあなたが達成しようとしていることの私の解釈です：DEMO。

HTML

<img class="thumb" src="/img/logo.png" width="100" />
<img class="thumb" src="http://www.wpclipart.com/sign_language/thumbs_up_large.png" width="100" />

<div class="cover">
    <img id="cover" width="400"/>
    <img id="cover-old" width="400"/>
</div>
​

Javascript

$(function() {
    $("img.thumb").on('click', function() { //when image with ID thumb is clicked change src 
        var imgpath = $(this).attr("src");
        $("#cover-old").attr('src', $("#cover").attr('src'));
        $("#cover-old").show();
        $("#cover").hide();
        $("#cover").attr("src", imgpath);
        $("#cover-old").fadeOut('slow');
        $("#cover").fadeIn('slow');
    });
});​

CSS

.cover {
    position: relative;

}
.cover img {
    position: absolute;
}
​

Answer 3

jqueryのクリックイベントではなく、イベントに参加する必要があります。ライブを活用することもできますが、現在は非推奨です。

Answer 4

必要なものをキャッチしたかどうかわかりませんが、これで問題ないはずです。試してください：

  $(function(){
        $("img#thumb").bind('click',function () {               
        var img = $(this).clone(); //this clones the img, so you do not need to re-load that using src path
        $(this).fadeOut(500);
        $("img#cover").hide().html(img).fadeIn(500); //remove .hide() segment if you just are hiding by css rules

        });

        });