Question

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

如何在已经存在的内容之上添加转换？哪个观看者点击图像的一部分并显示这些隐藏的图像??

Answer 1

假设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"); 
});

请在此处查看fadeOut api：http://docs.jquery.com/Effects/fadeOut

单击图像淡入其他图像

1 个答案: