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为在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的ONLY消失在缩略图的第一次点击，剩下的只是简单地出现在点击，并且不会掉色的，我想它的工作是这样的：。

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

我希望我解释清楚。 :)任何帮助将非常感激。

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

感谢您的快速响应 - 只是尝试了这一点，除了它看起来像它显示新选择的大图像，淡出它，然后再次淡入。用户选择

用户选择下一图像>淡出第一图像> FADE IN下一图像

等等等等之后

• FADE IN第一图像：

  我需要它。