jQuery Callback for a fadeIn and fadeOut

I have looked at some of the other posts in the this community about the below issue and have not quite found what I am looking for...although I did find the below HTML and jQuery that was similar but not quite what I was looking for. This is for homework by the way, I would like to be up front with that. However I am pulling my hair out.

With that being said, I am looking for help in order to do a callback function to the below set of statements that will fade out the original image and then display the new caption and image automatically. The old caption and image should fade out and the new caption and image should fade in. I am a noob to all this and would like to learn all I can. I know that I am missing something. Every time I place the commented out piece, it makes the caption disappear. Below is the script:

$(document).ready(function() {
  $("#image_list a").click(function(pre) {
    pre.preventDefault();
    $("#image").fadeOut(1000);
    change($(this)).delay(1000);
    $("#caption").fadeOut(1000);
    change($(this)).delay(1000);
  }); //end click
}); //end ready

//image and caption fade
var change = function(img) {
  var caption = img.attr("title");
  var imageURL = img.attr("href");
  $("#caption").text(caption);
  //$(#caption).fadeIn();
  $("#image").attr("src", imageURL);
  $("#image").fadeIn();
}; //end image and caption fade

Here is the HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Swap</title>
    <link rel="stylesheet" href="main.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="image_swap.js"></script>
</head>
<body>
    <main>
        <h1>Ram Tap Combined Test</h1>
        <ul id="image_list">
            <li><a href="images/h1.jpg" title="James Allison: 1-1">
                <img src="thumbnails/t1.jpg" alt=""></a></li>
            <li><a href="images/h2.jpg" title="James Allison: 1-2">
                <img src="thumbnails/t2.jpg" alt=""></a></li>
            <li><a href="images/h3.jpg" title="James Allison: 1-3">
                <img src="thumbnails/t3.jpg" alt=""></a></li>
            <li><a href="images/h4.jpg" title="James Allison: 1-4">
                <img src="thumbnails/t4.jpg" alt=""></a></li>
            <li><a href="images/h5.jpg" title="James Allison: 1-5">
                <img src="thumbnails/t5.jpg" alt=""></a></li>
            <li><a href="images/h6.jpg" title="James Allison: 1-6">
                <img src="thumbnails/t6.jpg" alt=""></a></li>
        </ul>
        <h2 id="caption">James Allison: 1-1</h2>               
        <p><img src="images/h1.jpg" alt="" id="image"></p>
    </main> 
</body>
</html>

Use the callback provided:

$("#image").fadeOut(1000, function() {
    console.log("Done fading, do something else");
});

来源：https://stackoverflow.com/questions/35467008/jquery-callback-for-a-fadein-and-fadeout

标签

jquery

fadein

fadeout