Question

我已经查看了此社区中有关以下问题的其他一些帖子，并且还没有完全找到我要找的内容...虽然我确实发现下面的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>

Answer 1

使用提供的回调：

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

用于fadeIn和fadeOut的jQuery回调

1 个答案: