0

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

我该如何在已经存在的内容之上添加过渡？哪个查看器单击图像的一部分并显示这些隐藏的图像？

4

1 回答 1

2

假设一个 div 包含这样的图像

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

您将一个函数作为回调参数传递给fadeOut()，它会重置src 属性，然后使用fadeIn() 淡出：

$("#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-07T21:30:21.113 回答