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");
    });
});