0

HTML と JQuery はまったく初めてなので、学校のプロジェクト用に Web コミックを作ろうとしています。これは推理小説なので、視聴者が画像の一部をクリックすると、ユーザーから隠されている他の画像が表示されるようにしています。これらの非表示の画像には、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" />

src 属性をリセットしてから、fadeIn() を使用してフェードバックするfadeOut() へのコールバック引数として関数を渡します。

$("#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 に答える