jquery - フェードアウト、画像の置き換え、フェードイン

Question

このスクリプトにはいくつかの問題があります。スクリプトを機能させるための助けをいただければ幸いです。最初に古い画像をフェードアウトし、次にフェードインする新しい画像をロードします。フェードインを使用しても、新しい画像は置き換えられません!?

$("#image2").click(function () {
    $("#portfolio").fadeOut('slow', function () {
        $("#portfolio").attr("src", "Images/Portfolio/portfolio_strv.jpg", function () {
            $(this).fadeIn(400);
        });
    });
});

Answer 1

$("#image2").click(function() {
    $("#portfolio").fadeOut('slow', function() {
        $(this)  // this refers to #portfolio
            .attr("src", "Images/Portfolio/portfolio_strv.jpg") // change src
            .load(function() { 
                // after load complete 
                // fade in the image
                $(this).fadeIn(400);
        });
    });
});​

Answer 2

画像の onload イベントをバインドしてから、画像をロードする必要があります。

$("#image2").click(function () {
    $("#portfolio").fadeOut('slow', function () {
        $(this).load(function () {
            $(this).fadeIn(400);
        }).attr("src", "Images/Portfolio/portfolio_strv.jpg");
    });
});