我已经查看了这个社区中关于以下问题的其他一些帖子，但还没有完全找到我正在寻找的内容...尽管我确实找到了下面的 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>
最佳答案
使用提供的回调:
$("#image").fadeOut(1000, function() {
console.log("Done fading, do something else");
});
关于淡入和淡出的 jQuery 回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35467008/