Question

请找一些帮助。

我有一行水平缩略图作为ONE图像加载，不同的缩略图图像通过imagemap引用：

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

用户点击缩略图
大图片FADES IN缩放框
用户点击另一个缩略图
第一张图片FADES OUT和第二张选定的缩略图FADES IN
等

我希望我能清楚地解释清楚。 :)非常感谢任何帮助。

Answer 1

您只需要在更改路径之前淡出图像＆amp;将它淡入...所以你的点击功能应该变成：

编辑：忘记显示/隐藏动画是异步发生的，所以你需要在淡出时使用回调来触发其余的...代码应该是：

<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

感谢您的快速反应 - 只是尝试了这个和它，除了它看起来它显示新选择的大图像，FADES它OUT，然后再次FADES它IN。

我需要它：

用户选择
用户选择下一张图片＆gt; FADE OUT 1st image＆gt; FADE IN next image
依此类推。

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

2 个答案: