jQuery 和 ajax 库对拇指点击的淡入和淡出效果！答案

【问题标题】：jQuery and ajax gallery fade in and fade out effect on thumb clicks!jQuery 和 ajax 库对拇指点击的淡入和淡出效果！
【发布时间】：2010-10-23 00:53:49
【问题描述】：

请帮忙。

我将一行水平缩略图加载为一个图像，其中通过图像映射引用不同的缩略图图像：

<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 框中的缩略图的 LARGE 版本中淡入淡出。

<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 只在第一次点击缩略图时淡入，其余的只是在点击时出现，而不是淡入。我希望它以这种方式工作：

用户点击缩略图
大图淡入缩放框
用户点击另一个缩略图
第一个图像淡出，第二个选定的缩略图淡入
等

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

【问题讨论】：

标签： jquery fade

【解决方案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>

【讨论】：

感谢您的快速响应 - 刚刚尝试过，但它看起来像显示新选择的大图像，淡出，然后再次淡入。我需要它：淡入第一张图像，在用户选择下一张图像时选择它后淡出第一张图像淡入下一张图像等。

【解决方案2】：

我是新来的，刚刚看到我对您的回复的评论风格非常糟糕。 :P

感谢您的快速响应 - 刚刚尝试过，但它看起来像显示新选择的 LARGE 图像，将其淡出，然后再次淡入。

我需要它：

用户选择后第一张图片淡入
用户选择下一张图片 > 淡出第一张图片 > 淡入下一张图片
等等等等。

【讨论】：