點擊圖片在其他圖片中淡入

對於HTML和JQuery來說是全新的我正在嘗試爲我的學校項目製作一個網絡漫畫。這是一個偵探故事，所以我試圖讓觀衆點擊圖像的一部分，然後揭示一些隱藏在用戶身上的其他圖像。這些隱藏的圖像對它們已經有一些Jquery懸停效果，這會將它們從灰度轉換爲彩色，如下所示。點擊圖片在其他圖片中淡入

<script src="jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
$("#apDiv2").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 
}); 

</script> 



</head> 

<body> 

<div id="apDiv1"><img src="rescuebunny.jpg" width="442" height="268"></div> 
<div id="apDiv2"><img src="rescuebunny-grey.png" width="442" height="268"></div> 
<div class="container"></div> 
</body> 
</html>

我該如何在這裏已經添加的轉換？哪個查看器點擊圖像的一部分，並顯示這些隱藏的圖像？

來源

2013-04-07 bunzbox

不透明度使用值0（unvisible）到100（完全可見） – 2013-04-07 14:19:25

我希望讓這些已經過動畫圖像未改變，但最重要的是，是否有可能在頂部添加更多的代碼以完全隱藏圖像，然後用戶點擊「圖片中的證據」。 – bunzbox 2013-04-07 14:25:03

假設含有這樣

<img id="image" src="http://path_to_my_image.png" />

您傳遞函數作爲回調參數到淡出（的圖像）一個div用於復位的src屬性，然後變淡背面使用淡入（）：

$("#image").fadeOut(function() { 
    $(this).load(function() { $(this).fadeIn(); }); 
    $(this).attr("src", "http://path_to_new_image.png"); 
});

見淡出API這裏：http://docs.jquery.com/Effects/fadeOut

來源

2013-04-07 21:30:21 damoiser

我想通了！類似於你的建議。謝謝！ – bunzbox 2013-04-08 06:27:21

點擊圖片在其他圖片中淡入

回答

相關問題