jQuery的循環出現異常行爲

請這麼好看看我的腳本：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>

http://jsfiddle.net/QSfgG/

它的工作好，但你很可能會看到，它循環真奇怪！我想要的是，第一個區塊中的方格全部單獨移動，然後向後滑動，然後第二個方格中的方格執行相同的操作，然後是第三個方塊，然後是第四個方塊，然後再次循環，直到完成並在無限的情況下。

取而代之，第一個塊的行爲是正確的，然後是第二個，然後是第三個，但是最後的怪異開始;塊2和4開始一起移動，然後塊3，然後再次塊2和4。 1號區完全錯過了。真奇怪。

我認爲答案在於功能下降的某個地方。

謝謝你的時間！

來源

2013-02-24 Starkers

+1爲jsFiddle。我建議下次拆分HTML，CSS和JavaScript，以便其他人查看。您還可以刪除任何多餘的HTML，如頭部和身體標記。 – 2013-02-24 21:25:00

啊，是的，會做！ – Starkers 2013-02-24 22:02:35

問題是你要在兩個地方添加'主動'類。考慮到你的代碼設計，你只能在down（）函數中添加/刪除它。

只需刪除該行跨（）：

$("#slideshow .div:first-child").addClass('active');

此外，您還需要重置$ COUNT2爲4或它只會循環兩次。在down（）中做這個，參考我的小提琴的具體細節。

這是我自己的小提琴版本。我分離出HTML，CSS和JavaScript，因此我更容易進行調試。

鏈接：jsFiddle

另一個建議是刪除$ COUNT2。而不是檢查$ count2 == 0，請檢查！$ next.length。當它爲0時，它將評估爲真。

鏈接：jsFiddle without $count2

來源

2013-02-24 21:05:57

詳細，一致，完美答案:) – Starkers 2013-02-24 22:04:27

jQuery的循環出現異常行爲

回答

相關問題