jQueryとajaxギャラリーは、親指のクリックでフェードインおよびフェードアウト効果を発揮します！

Question

サポートが必要です。

1つの画像として読み込まれた水平サムネイルの行があり、さまざまなサムネイル画像がイメージマップ経由で参照されています：

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

id =＆quot; zoom＆quot;を持つdiv内のIMGタグユーザーが「クリック」するときのAJAXズームウィンドウです。サムネイルで画像の拡大版を表示します。

これは、ズームボックス内のサムネイルの大きなバージョンをフェードインする必要があるjQueryコードです。

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

今、jQueryはサムネイルの最初のクリックでフェードインするだけで、残りはフェードインせず、クリックするだけで表示されます。

• ユーザーがサムネイルをクリックする
• 拡大画像はズームボックスにフェードインします
• ユーザーが別のサムネイルをクリックする
• 最初の画像がフェードアウトし、2番目に選択したサムネイルがフェードイン
• など

明確に説明したいと思います。 :)助けていただければ幸いです。

Answer 1

パスを変更する前に画像をフェードアウトする必要があります。フェードイン...クリック機能は次のようになります：

編集：アニメーションの表示/非表示が非同期に発生したことを忘れたため、フェードアウトでコールバックを使用して残りをトリガーする必要があります...コードは次のとおりです：

<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

私はここに新しく、あなたの応答に対する私のコメントがひどくスタイル付けされているのを見ました。 ：P

迅速な対応に感謝します-これを試してみてください。新しく選択した大きな画像を表示し、フェードアウトし、再びフェードインするように見えます。

私はそれが必要です：

• ユーザーが選択した後の最初の画像にフェード
• ユーザーが次の画像を選択＆gt;最初の画像をフェードアウト＆gt;次の画像にフェードイン
• などなど。