CODEWITHSUNDEEP
jqueryhtml
bunzbox
bunzbox

Reputation: 45

image on click fade in other image

being totally new to HTML and JQuery I am trying to craft a web comic for my school project. It is a detective story, So I am trying to have the viewer to click on one part of the image and then it reveals the some other images which are hidden from the user. These hidden images already have some Jquery hover effect on them, which turns them from grey-scale to colored as coded below. 

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

How do I go about adding the transition on top of what is already here? Which viewer clicks on one part of the image and it reveals these hidden images??

Upvotes: 0

Views: 3373

Answers (1)

damoiser
damoiser

Reputation: 6238

Assuming a div containing an image like this

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

You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():

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

See the fadeOut api here: http://docs.jquery.com/Effects/fadeOut

Upvotes: 2

Related Questions