¡La galería jQuery y ajax se desvanecen y se desvanecen en los clics del pulgar!

Question

Necesito ayuda, por favor.

Tengo una línea de miniaturas horizontales cargadas como UNA imagen con las diferentes imágenes de miniaturas a las que se hace referencia a través de un mapa de imágenes como tal:

<div id="zoom">
    <img src="" />
</div>
<div id="collectionindex">
    <img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
            <area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
            <area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
            <area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
            <area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
            <area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
        </map>
</div>

La etiqueta IMG en el div con id = " zoom " es mi ventana de zoom AJAX para cuando los usuarios "hacen clic en" en las miniaturas para mostrar la versión más grande de la imagen.

Este es el código jQuery que tengo que desvanecer en las versiones GRANDES de las miniaturas en el cuadro ZOOM.

<script type="text/javascript">
$(document).ready(function(){

$("area").click(function(){

        var largePath = $(this).attr("href");

        $("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
            });
    });
</script>

En este momento, jQuery SOLO se desvanece EN la primera miniatura en la que se hizo clic, el resto simplemente aparece al hacer clic y no se desvanece. Me gustaría que funcione de esta manera:

• miniatura de clics del usuario
• imagen grande se desvanece en el cuadro de zoom
• el usuario hace clic en otra miniatura
• primera imagen FADES OUT y segunda miniatura seleccionada FADES IN
• etc.

Espero haberlo explicado claramente. :) Cualquier ayuda sería inmensamente apreciada.

Answer 1

Solo necesita desvanecer la imagen antes de cambiar la ruta & amp; desvaneciéndolo ... para que su función de clic se convierta en:

EDITAR : Olvidé que las animaciones de mostrar / ocultar ocurrieron de forma asíncrona, por lo que debe usar una devolución de llamada en el desvanecimiento para activar el resto ... el código debe ser:

<script type="text/javascript">
$(document).ready(function(){
    $("area").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
            $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

Answer 2

Soy nuevo aquí y acabo de ver que mi comentario a su respuesta fue terriblemente estilizado. : P

gracias por la rápida respuesta, solo probé esto y parece que muestra la imagen GRANDE recién seleccionada, la desvanece y luego la desvanece nuevamente.

lo necesito para:

• FADE IN 1st image después de que el usuario seleccione
• el usuario selecciona la siguiente imagen > FADE OUT 1st imagen > FADE IN next image
• y así sucesivamente.