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'');
});