用于淡入和淡出的 jQuery 回调答案

【问题标题】：jQuery Callback for a fadeIn and fadeOut用于淡入和淡出的 jQuery 回调
【发布时间】：2016-02-18 04:33:23
【问题描述】：

我查看了这个社区中关于以下问题的其他一些帖子，但还没有完全找到我正在寻找的内容......尽管我确实找到了下面的 HTML 和 jQuery，它们很相似，但并不完全符合我的要求正在寻找。顺便说一句，这是家庭作业，我想先做好准备。但是我正在拔头发。

话虽如此，我正在寻求帮助，以便对以下一组语句执行回调函数，该函数将淡出原始图像，然后自动显示新的标题和图像。旧的标题和图像应该淡出，新的标题和图像应该淡入。我是这一切的菜鸟，想尽我所能学习。我知道我错过了一些东西。每次我放置注释掉的部分时，它都会使标题消失。下面是脚本：

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

这里是 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>

【问题讨论】：

您在change($(this)) 上调用.delay(1000);，但change 没有返回任何内容。

标签： jquery fadein fadeout

【解决方案1】：

使用提供的回调：

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

【讨论】：