Image Replacement (Galerie-Stil) mit Fade-In/die Fade-Out des

Question

Ich bin sicher, dass Sie all diese Demo von Bild Ersatz gesehen haben mit diesem:

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

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

also vorstellen, dass Ich möchte 4 Bilder auf dem Bildschirm ändern, um zu simulieren, dass ich die gesamte 'Seite' verändere, aber die Verwendung von AJAX/PHP oder irgendwelchen Bild-Preloadern vermeide. Das Problem Ich habe jetzt mit meinem 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> 

ist, dass, wenn Sie einen Anruf ‚Fade-in‘, ‚Opazität animiert‘ oder so etwas, den Schalter von der Bildquelle mit .attr ({ src: was auch immer}) macht es immer zuerst sichtbar, selbst nachdem die .css visibility keine/unsichtbar gemacht wurde.

ich bereits versucht haben, zu verzögern, setTimeout, etc. (Ich habe versucht, so viel wie ich kann, um zu erforschen doppelte Beiträge zu vermeiden)

Hoffnung, die Sinn macht, tut mir leid, wenn es zu wortreich/unklar

Meinung ist geschätzt! Vielen Dank!

Answer 1

Was passiert, wenn Sie alle Elemente mit einem Container umbrechen und den Container während des Bildübergangs ein-/ausblenden.

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