我正在进行一项任务，我们需要创建一个动画，其中图像滑动，隐藏，然后将加载到下一个图像。
我有动画和隐藏功能正常工作，我只是无法弄清楚如何加载下一个图像及其相关标题。这是我到目前为止的代码。隐藏图像并加载回调函数中的下一个图像是否正确，或者我是否必须创建一个完整的单独函数来显示下一个图像
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
var slideNode = $("image_list");
//var images =
// preload the image for each link
var galleryImage = new Image();
galleryImage.src = imageURL;
// set up the event handlers for each link
$(this).click(function(evt) {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
//$("#image").hide();
//$("#image").animate({marginLeft: "-=100px"});
$("#image").animate({
//opacity: 0.25,
marginLeft: "-=100px",
//height: "toggle"
}, 2000, function() {
// Animation complete.
$("#image").hide();
//load in next image after animation
imageCounter = (imageCounter + 1) % imageURL.length;
//galleryImage.src = imageURL[imageCounter];
//caption =
});
// cancel the default action of each link
evt.preventDefault();
}); // end click
}); // end each
// move the focus to the first link
$("li:first-child a").focus();
}); // end readybody {
font-family: Arial, Helvetica, sans-serif;
width: 420px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
li {
padding: 0 0.25em;
display: inline;
}
#caption, #gallery {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="image_gallery.js"></script>
</head>
<body>
<main>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>
<li><a href="casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>
<li><a href="catchrelease.jpg" title="Catch and Release on the Big Horn">Big Horn</a></li>
<li><a href="fish.jpg" title="Catching on the South Fork">South Fork</a></li>
<li><a href="lures.jpg" title="The Lures for Catching">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="casting1.jpg" alt="Image Gallery area" id="image">
</p>
</main>
</body>
</html>
答案 0 :(得分：0)
我并非100％确定您希望实现的动画是什么......但我认为这是（运行代码段）。
我认为您希望在隐藏图片网址及其标题时更改图片网址及其标题。在这里，我更喜欢.fadeOut()和.fadeIn()效果。因为没有＆＃34; sizing＆＃34;像.hide()和.show()中的动画。那是关于品味的。
我认为图像淡入应该在动画回调中完成（稍微向左移动后）... 然后在.fadeOut()回调中（当图像完全时）隐藏），你可以改变图像和标题。在那里，你还应该重置marginLeft属性......否则，每次点击时图像会向左移动一点，很快就会从容器中移出。您的代码中没有任何内容可以将其带到右侧。所以也许它可以重新定位它。
$(document).ready(function() {
imageCounter = 0;
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
var slideNode = $("image_list");
//var images =
// preload the image for each link
var galleryImage = new Image();
galleryImage.src = imageURL;
// set up the event handlers for each link
$(this).click(function(evt) {
$("#image").animate({
marginLeft: "-=100px",
}, 2000, function() {
// Animation complete.
$("#caption").fadeOut(400);
$("#image").fadeOut(400, function(){
$(this).attr("src", imageURL).css({"marginLeft":0}).fadeIn(400);
$("#caption").text(caption).fadeIn(400);
});
//load in next image after animation
imageCounter = (imageCounter + 1) % imageURL.length;
});
// cancel the default action of each link
evt.preventDefault();
}); // end click
}); // end each
// move the focus to the first link
$("li:first-child a").focus();
}); // end readybody {
font-family: Arial, Helvetica, sans-serif;
width: 420px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
li {
padding: 0 0.25em;
display: inline;
}
#caption, #gallery {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="image_gallery.js"></script>
</head>
<body>
<main>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="http://via.placeholder.com/350x150?text=casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>
<li><a href="http://via.placeholder.com/350x150?text=casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>
<li><a href="http://via.placeholder.com/350x150?text=catchrelease.jpg" title="Catch and Release on the Big Horn">Big Horn</a></li>
<li><a href="http://via.placeholder.com/350x150?text=fish.jpg" title="Catching on the South Fork">South Fork</a></li>
<li><a href="http://via.placeholder.com/350x150?text=lures.jpg" title="The Lures for Catching">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="http://via.placeholder.com/350x150?text=casting1.jpg" alt="Image Gallery area" id="image">
</p>
</main>
</body>
</html>
请注意，jQuery没有加载到您的问题的片段中......并且imageCounter未定义为初始值。