jQuery und Ajax-Galerie verblassen in und fade out Effekt auf Daumen Klicks!

Question

etwas Hilfe benötigen, wenden Sie sich bitte.

Ich habe eine Reihe von horizontalen Thumbnails als ein Bild mit den verschiedenen Thumbnails Bildern über eine imagemap als solche bezeichnet geladen:

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

Der IMG-Tag in der div mit id = „Zoom“ ist mein AJAX Zoom-Fenster für, wenn Benutzer „Klick“ auf den Thumbnails die größere Version des Bildes angezeigt werden soll.

Dies ist jQuery-Code ich die großen Versionen der Thumbnails in dem ZOOM-Box fadeIn habe.

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

Im Moment jQuery schwindet nur im ersten auf dem Vorschaubild geklickt hat, der Rest einfach nur erscheinen bei Klick, und nicht in verblasst ich mag es auf diese Weise arbeiten.

• Benutzer klickt Miniatur
• Großbild einblendet Feld vergrößern
• Benutzer klickt auf ein anderes Thumbnail
• erstes Bild ausblendet und zweiten ausgewählter Thumbnail einblendet
• etc.

Ich hoffe, dass ich es deutlich erklärt. :) Jede Hilfe wäre immens geschätzt.

Answer 1

Sie müssen nur das Bild verblassen, bevor Sie den Weg zu ändern und es in Verblassen ... so Ihre Klick-Funktion werden soll:

Bearbeiten : Vergessen, dass die Ein- / Ausblenden Animationen asynchron geschehen, so können Sie einen Rückruf auf dem Fade verwenden müssen Sie den Rest auszulösen ... sollte Code sein:

<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

Ich bin neu hier und habe gerade mein Kommentar zu Ihrer Antwort schrecklich gestylt wurde. : P

Danke für die schnelle Antwort - das gerade versucht, und es außer es sieht aus wie es das neu gewählte LARGE Bild anzeigt, FADES es aus, FADES es dann wieder an.

ich brauche es an:

• FADE IN 1. Bild nach der Benutzer auswählt
• Benutzer wählt nächstes Bild> FADE OUT 1. Bild> FADE IN nächstes Bild
• und so weiter und so weiter.