images - image transition css

Reemplazo de imagen(estilo galería) con Fade-In''s/Fade-Out''s

Question

Estoy seguro de que todos ustedes han visto esta demostración de reemplazo de imagen usando esto:

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

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

Entonces, imagina que quiero cambiar 4 imágenes en la pantalla para simular que estoy cambiando toda la ''página'', pero evitando usar AJAX / PHP o cualquier precargador de imágenes. El problema que estoy teniendo ahora con mi código:

<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>

es que cuando llamas ''fade-in'', ''animate opacity'' o algo por el estilo, el cambio de la fuente de imagen usando .attr ({src: whatever}) siempre lo hace visible primero, incluso después de hacer la visibilidad .css ninguno / invisible

Ya he intentado retrasar, setTimeout, etc. (traté de investigar todo lo posible para evitar publicaciones duplicadas)

Espero que tenga sentido, lo siento si es demasiado prolijo / confuso

Comentarios son apreciados! ¡Gracias!

Answer 1

¿Qué sucede si envuelve todos los elementos con un contenedor y luego desvanece el contenedor durante la transición de imagen?

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