從縮略圖中淡入圖像

Question

我希望有人能幫助我。我無法弄清楚如何在圖像之間做一個漂亮而乾淨的淡入淡出過渡。下面的代碼被簡化了，但jquery與我在測試代碼中的差不多。我想從div num1的「背景」中的當前圖像淡入到下一個圖像（其中下一個圖像是單擊的縮略圖）。目前的代碼似乎只對第一個代碼執行此操作，此後不會有任何淡入淡出。我將如何做到這一點爲我有多個圖像？預先感謝您的幫助。

JQuery的：

jQuery(document).ready(function() { 
    $(".bg_image_thumb").click(function(){ 
    var thumb_id = this.id; 
    var main_href = $("#"+thumb_id).attr('href'); 
    $("#main_image").attr("src", main_href).fadeIn("slow"); 
    }); 
}); 

CSS：

#container { position: relative; } 
#num1, #num2 { position: absolute;} 
#num1 { z-index: 1; } 
#num2 { z-index: 2; } 

HTML：

<div id="container"> 
<div id="num1" style="min-height:700px;height:700px;width:700px;"><img id="main_image" src=""></div> 
<div id="num2"> 
<a class="bg_image_thumb" id="bg_image_thumb1" onclick="return false;" href=image1.jpg"><img src="image1.jpg" /></a> 
<a class="bg_image_thumb" id="bg_image_thumb2" onclick="return false;" href=image2.jpg"><img src="image2.jpg" /></a> 
<a class="bg_image_thumb" id="bg_image_thumb3" onclick="return false;" href=image3.jpg"><img src="image3.jpg" /></a> 
</div> 
</div> 

Answer 1

你需要改變你的淡入代碼，這樣的事情;

$("#main_image").fadeOut("slow", function() 
{ 
     $("#main_image").attr("src", main_href).fadeIn("slow"); 
}); 

此代碼首先隱藏您當前顯示的圖像，並在完成後，它將設置源並顯示新圖像。

[注意事項]

1. 這會給你淡出，當時的淡入的效果。如果你想有一個fadeIn-fadeOut（同一時間），你需要使用兩個控件來設置圖像。

在這種情況下，你需要使用兩個IMG控件：

<div id='container'> 
    <img id='main_image' src="http://dummyimage.com/300x200/000/fff&text=test1" /> 
    <img id='main_image_back' /> 
</div> 

$("#main_image_back").attr("src", main_href).hide().fadeIn("slow", function() 
{ 
     $("#main_image").attr("src", $("#main_image_back").attr("src")); 
     $("#main_image_back").hide(); 
}); 
$("#main_image").show().fadeOut("slow", function(){$(this).show();}); 

，並在你的CSS：

#container {position:relative;} 
#main_image_back {display:none; position:absolute; top:0; left:0;} 

jsFiddler鏈接：http://jsfiddle.net/ke4kM/7/

Answer 2

嘗試通過更換您的線路：

<a class="bg_image_thumb" id="bg_image_thumb1" onclick="return false;" href="image3.jpg"><img src="image3.jpg" /></a> 

小提琴：http://jsfiddle.net/Christophe/4z5sK/1/