点击图片在其他图片中淡入

对于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

点击图片在其他图片中淡入

回答

相关问题