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