I am having an issue with my jQuery code below. The goal is when a book in the c
ID: 3675244 • Letter: I
Question
I am having an issue with my jQuery code below. The goal is when a book in the carousel is clicked, the already existing image should fade out as it slides to the left and then the new image (for the book you clicked on) should fade in from the right. Everything works nicely in my code EXCEPT when a new image is clicked is it that image that fades out left and then fades back in from right instead of the original image fading out and the new one fading in. The actual animation perimeters were set by the book problem I am working on. Any help would be greatly appreciated!
jQuery
$(document).ready(function() {
var slider = $("#image_list"); // slider = ul element
var leftProperty, newleftProperty;
// the click event handler for the right button
$("#right_button").click(function() {
// get value of current left property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty - 300 <= -900) {
newLeftProperty = 0; }
else {
newLeftProperty = leftProperty - 300; }
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
// the click event handler for the left button
$("#left_button").click(function() {
// get value of current right property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty < 0) {
newLeftProperty = leftProperty + 300;
}
else {
newLeftProperty = 0;
}
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
//Large image swap
//preload images
$("#image_list a").each(function(){
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
//end preload
$("#image_list a").click (function(evt){
var imageURL = $(this).attr("href");
$("#image").attr("src",imageURL);
evt.preventDefault();
//current image
$("#image").animate({opacity: 0, left: -205,}, 1000);
$("#image").css("position", "relative");
//new image
$("#image").animate({opacity: 1, left: +10,}, 1000);
$("#image").css("position", "relative");
});
}); // end ready
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Animation</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="carousel.js"></script>
</head>
<body>
<section>
<h1>View our Books</h1>
<img id="image" src="images/book1.jpg" alt="SQL Server 2008 for Developers">
<div id="carousel">
<div id="left_button" class="button_panel"><img src="images/left.jpg" alt=""></div>
<div id="display_panel">
<ul id="image_list">
<li><a href="images/book1.jpg"><img src="images/book1.jpg" alt="SQL Server 2008 for Developers"></a></li>
<li><a href="images/book2.jpg"><img src="images/book2.jpg" alt="PHP and MySQL"></a></li>
<li><a href="images/book3.jpg"><img src="images/book3.jpg" alt="Visual Basic 2010"></a></li>
<li><a href="images/book4.jpg"><img src="images/book4.jpg" alt="ADO.NET 4 database programming with VB 2010"></a></li>
<li><a href="images/book5.jpg"><img src="images/book5.jpg" alt="ASP.NET 4 web programming with VB 2010"></a></li>
<li><a href="images/book6.jpg"><img src="images/book6.jpg" alt="Oracle SQL and PL/SQL"></a></li>
<li><a href="images/book7.jpg"><img src="images/book7.jpg" alt="Java Servlets and JSP"></a></li>
<li><a href="images/book8.jpg"><img src="images/book8.jpg" alt="C# 2010"></a></li>
<li><a href="images/book9.jpg"><img src="images/book9.jpg" alt="ASP.NET 4 web programming with C# 2010"></a></li>
</ul>
</div>
<div id="right_button" class="button_panel"><img src="images/right.jpg" alt=""></div>
</div>
</section>
</body>
</html>
CSS
article, aside, figure, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
margin: 0 auto;
width: 410px;
height: 480px;
border: 2px solid blue;
}
section {
padding: 20px 0;
}
h1 {
font-size: 140%;
text-align: center;
margin-bottom: .5em;
}
#image {
height: 250px;
margin-bottom: 1em;
margin-left: 105px;
}
/* the styles for the carousel */
.button_panel {
height: 125px;
padding: 50px 15px;
float: left;
}
.button_panel img {
width: 25px;
height: 25px;
}
#display_panel {
height: 125px;
width: 300px;
overflow: hidden;
float: left;
}
#image_list {
left: 0px;
position: relative;
width: 900px;
list-style: none;
}
#image_list li {
float: left;
width: 100px;
}
#image_list li img {
width: 95px;
}
Explanation / Answer
Try this JS:
$(document).ready(function() {
var slider = $("#image_list"); // slider = ul element
var leftProperty, newleftProperty;
// the click event handler for the right button
$("#right_button").click(function() {
// get value of current left property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty - 300 <= -900) {
newLeftProperty = 0;
} else {
newLeftProperty = leftProperty - 300;
}
// use the animate function to change the left property
slider.animate({
left: newLeftProperty
}, 1000);
}); // end click
// the click event handler for the left button
$("#left_button").click(function() {
// get value of current right property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty < 0) {
newLeftProperty = leftProperty + 300;
} else {
newLeftProperty = 0;
}
// use the animate function to change the left property
slider.animate({
left: newLeftProperty
}, 1000);
}); // end click
$("#image_list a").click(function(event) {
var newImage = $(this);
event.preventDefault();
$("#image").animate({
opacity: 0,
"margin-left": "-205"
}, 1000,
function() {
$("#image").attr("src", newImage.attr("href")).animate({
opacity: 1,
"margin-left": "+=305"
}, 1000);
});
}); //end of click event handler
}); //end ready
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.