Seeking help with animating a set of images to move individually 300px right on first click, and then 300px left when clicked again.
I'm currently facing an issue where my code is not working. It could be due to A) syntax errors or B) the images not rendering at 5px as intended.
UPDATE: The corrected code has been added to this fiddle
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#wrapper {
width: 80em;
}
.image {
width: 10em;
height: 10em;
display: block;
position: relative;
left:5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".image").click(function() {
if ($('this').css('left') =='5px') {
$(".image").animate({"right": "300px"},3000);
else
$(".image").animate({"left": "300px"},3000);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<section id="gallery">
<img id="avery" class="image" src='images/OAI.jpg' alt= "On Avery Island Album Art">
<img id="overthesea" class="image" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">
<img id="beauty" class="image" src='images/beauty.jpg' alt="Beauty Demo Album Art">
<img id="everthingIs" class="image" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
</section>
</div>
</body>
</html>