1
Пожалуйста, будьте так хорошо, чтобы взглянуть на мой сценарий:Jquery петля ведет себя странно
<!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>
Это хорошо работает, но, как вы, вероятно, может видеть, что петли действительно странно! Я хочу, чтобы квадраты в первом блоке все перемещались индивидуально, а затем отходили назад, затем квадраты во втором, чтобы сделать то же самое, затем третье, затем четвертое, а затем, чтобы все это зациклилось снова, и до бесконечности.
Вместо этого первый блок ведет себя правильно, затем второй, а затем третий, но затем на последнем начинается странность; блоки 2 и 4 начинают перемещаться вместе, затем блок 3, затем снова блокируют 2 и 4. Блок 1 полностью пропущен. Очень странно.
Я думаю, что ответ лежит где-то в функции вниз.
Спасибо за ваше время!
+1 за jsFiddle. В следующий раз я предлагаю разбить HTML, CSS и JavaScript, чтобы облегчить просмотр другим пользователям. Вы также можете удалить любой посторонний HTML, как теги головы и тела. –
Ах да, сделаю! – Starkers