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第一圖像：

  我需要它。