jQuery和ajax画廊在拇指点击时淡入和淡出效果！

Question

需要帮助。

我将一行水平缩略图作为一个图像加载，并通过图像映射引用了不同的缩略图图像，例如：

<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 =“ zoom”的div中的IMG标签是我的AJAX缩放窗口，当用户在缩略图上“单击”以显示较大版本的图像时。

这是我必须淡出的jQuery代码，在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>

现在，jQuery仅淡入第一次单击的缩略图，其余仅在单击时出现，而不淡入。我希望它以这种方式工作：

• 用户点击缩略图
• 大图淡入缩放框
• 用户单击另一个缩略图
• 第一张图像渐显和第二张所选缩略图渐显
• 等

希望我能清楚地解释。 :)任何帮助将不胜感激。

Answer 1

您只需要在更改路径和使其渐入渐弱之前淡出图像，因此您的点击功能应变为：

EDIT：忘记了显示/隐藏动画是异步发生的，因此您需要在淡出时使用回调来触发其余的...代码应该是：

<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

感谢您的快速响应-尝试了一下，除了看起来像是显示了新选择的大图像，将其淡出，然后再次淡入。

我需要它：

• 用户选择后淡入第一张图像
• 用户选择下一张图像>淡出第一张图像>淡入下一张图像
• 依此类推。