.load() and .fadeIn in jquery

Question

hello.. i have this code and it work find except the fadeIn transition..

$("div.thumbnailsContainer").fadeOut("500",function(){            
        $("div.fullViewContainer").empty();
        $('<img />')
        .attr('src', imgPathLarge)
        .load(function(){               
            $("div.fullViewContainer").append( $(this) );
            $("div.fullViewContainer").fadeIn("1000");
        });   
    });    

the problem is, after the image completely loaded, fadeIn transition will not work properly, it will just appear after loads but without transition..

what could be the problem with my code?

do i need to put setTimeout to delay the transition after image load?

Answer 1

It doesn't look as though div.fullViewContainer was ever hidden -- it was empty, but not hidden. So when you append the new image to it, it's visible right away, even before the "fadeIn" command is called.

Answer 2

Try hiding the image first and then calling fadeIn in the load() handler.

See: http://stackoverflow.com/questions/1294513/jquery-fade-in-image-after-image