Image Replacement (gallery style) with Fade-In's / Fade-Out's

Question

Hey Everyone,

I'm sure you've all seen this demo of image replacement 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 avoiding using AJAX / PHP or any image preloaders. The problem I am having right now 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 a 'fade-in', 'animate opacity' or anything like that, the switch of the image source using .attr({src : whatever}) always makes it visible first , even after making the .css visisbility none / invisible.

I have already tried delaying, setTimeout , etc (I tried to research as much as I can to avoid duplicate posts)

Hope that makes sense, sorry if it's too wordy / unclear

Feedback is appreciated! Thanks!

Answer 1

What happens if you wrap all of the elements with a container, then fade the container out/in during the image transition.

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