jQuery回调，可进行淡入和淡出 [英] jQuery Callback for a fadeIn and fadeOut
问题描述
我查看了该社区中有关以下问题的其他一些帖子，但并未完全找到我想要的内容...尽管我确实找到了以下类似的HTML和jQuery，但并不完全相同.在寻找.顺便说一下，这是为了做作业，我想先说一下.但是我正在拔头发.
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
这是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回调，可进行淡入和淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
