Replacing an image (gallery style) with Fade-In / Fade-Out

Question

I'm sure you all saw this image replacement demo using this:

$("#largeImg").attr({ src: largePath, alt: largeAlt });

http://www.webdesignerwall.com/demo/jquery/img-replacement.html

So, imagine that I want to change 4 images on the screen to simulate that I am changing the entire “page”, but avoid using AJAX / PHP or any image preloaders. The problem that I am currently facing with my code:

<script>
$(document).ready(function(){
    $(".navlink").click(function(){
        var theirname = $(this).attr("name");
        var imagepath = "images/img_"+theirname+".jpg";
        var headerpath ="images/header_"+theirname+".png";
        var textpath = "images/about_"+theirname+".jpg";
        //var lightpath = "images/smallimg_"+theirname+".jpg";
        $("#primeheader").attr({ src: headerpath});
        $("#primetext").attr({ src: textpath}); 
        $("#primephoto").attr({ src: imagepath});
    });
});
</script>

is that when you call fade-in, opacity opacity, or something like that, switching the image source using .attr ({src: whatever}) always makes it visible first, even after creation. css visisbility none / invisible.

, setTimeout .. ( )

, , , /

! !

Answer 1

, , / .

$('#primeContainer').fadeOut('fast', function() {
    $('#primeheader').attr({ src: headerpath });
    $('#primetext').attr({ src: textpath });
    $('#primephoto').attr({ src: imagepath });
    $(this).fadeIn('fast');
});