So I am using jQuery to fade in and out but I encountered the problem in which when I run the code the img is faded out but the same img fades back in. I am stuck.
Here is the code
$(document).ready(function() {
// preload the image for each link
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
//-------------------------
// set up the event handlers for each link
$("#image_list a").click(function(evt) {
// alert($(this).attr("title"))
$("#image, #caption").fadeOut(3000, function(){
$("#image").attr("src", $(this).attr("href"));
$("#caption").text($(this).attr("title"));
});
$("#image, #caption").fadeIn(3000);
evt.preventDefault();
});
// get the image URL and caption for each image and animate the caption
// cancel the default action of each link
// move the focus to the first link
}); // end ready