Fade out, replace image and fade in

Question

I have some problems with this script and I would appreciate some help to get it to work. First I fade out the old image and then I load the new image that in the same time fades in. The new image isn't replaced when I use the fade in!?

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

The `.attr()` method doesn't take three parameters. Try `$("#portfolio").attr("src","Images/Portfolio/portfolio_strv.jpg").fadeIn(400)` — nnnnnn, Sep 16 '12 at 11:13
possible duplicate of [How to refresh the src of with jQuery?](http://stackoverflow.com/questions/1997901/how-to-refresh-the-src-of-img-with-jquery) — Ram, Sep 16 '12 at 11:14

score 3 · Answer 1 · answered Sep 16 '12 at 11:14

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

score 2 · Accepted Answer · answered Sep 16 '12 at 11:16

You need to bind the onload event of the image, and then load the image.

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

Fade out, replace image and fade in

2 Answers2