gpt4 book ai didi

淡入和淡出的 jQuery 回调

转载 作者:行者123 更新时间:2023-12-01 07:08:13 26 4
gpt4 key购买 nike

我已经查看了这个社区中关于以下问题的其他一些帖子,但还没有完全找到我正在寻找的内容...尽管我确实找到了下面的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com