淡出，替换图像和淡入

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