.load() and .fadeIn in jquery

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(){              开发者_JS百科 
            $("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?

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

See: jquery: fade in image after image

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.