Jquery loop behaving strangely
Question
Please be so good to take a look at my script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$count = 4;
$row = 10;
function across() {
var $active = $('#slideshow .active .current');
var $next = $active.next();
$next.addClass('current');
$active.animate({left: '+=50px'},800,'swing').removeClass('current');
$row += 10;
$count--;
if($count == 0) {
$count = 4;
$row = 10;
$($active).stop();
$('#slideshow .active .bed').animate({left: '-=50px'},1);
$("#slideshow .div:first-child").addClass('active');
$(".div .bed:first-child").addClass('current');
down();
}
}
$count2 = 4;
function down() {
var $active = $('#slideshow .active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
$count2--;
if($count2 == 0) {
$("#slideshow .div:first-child").addClass('active');
}
}
$(function() {
setInterval(across, 1000);
});
</script>
<style>
body {
background-color: black;
}
.active {
border: 1px solid white;
}
.current {
border: 1px solid white;
}
.div{
width: 200px;
height: 200px;
}
.alpha {
background-color: green;
}
.beta {
background-color: yellow;
}
.gamma {
background-color: red;
}
.delta {
background-color: pink;
}
.bed {
width: 50px;
height: 50px;
}
.one {
position: relative;
top: 0px;
background-color: orange;
}
.two {
position: relative;
top: 10px;
background-color: purple;
}
.three {
position: relative;
top: 20px;
background-color: grey;
}
</style>
</head><body>
<div id="slideshow">
<div class="div alpha active">
<div class="bed one current">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div beta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div gamma">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div delta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
</div>
</body></html>
It's working well, but as you can probably see, it loops really strangely! What I want is for the squares in the first block to all move individually and then slide back, then the squares in the second to do the same, then the third, then the fourth, and then for the whole thing to loop again, over and over ad infinitum.
Instead, the first block behaves correctly, then the second, and then the third, but then on the last the weirdness begins; blocks 2 and 4 begin to move together, then block 3, then blocks 2 and 4 again. Block 1 is missed out completely. Really weird.
I think the answer lies somewhere in function down.
Thanks for your time!
1 answers
solution1
3 ACCPTED 2013-02-24 21:05:57
The problem is you're adding the 'active' class in two places. Given your code design, you should only be adding/removing it in the down() function.
Simply remove the line in across():
$("#slideshow .div:first-child").addClass('active');
Also, you need to reset $count2 to be 4 or it will only loop twice. Do that in down(), refer to my Fiddle for specifics.
Here's my own version of your Fiddle. I split out the HTML, CSS, and JavaScript so it was easier for me to debug.
Link: jsFiddle
Another suggestion is to remove $count2. Instead of checking for $count2 == 0, check for !$next.length. When it is 0, it will evaluate as truthy.
Link: jsFiddle without $count2
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.