用一個按鈕隱藏和取消隱藏多個div

Question

part-1：我想每次單擊一個按鈕時逐漸淡出未知數量的div，這些div都具有相同的class屬性。

第2部分：當它們全部隱藏時，我希望同一個按鈕能夠一個接一個地等待它們。

我設法創建了一個工作腳本，但它看起來過於草率，並且在第二部分結束時滯後。那麼這種效果是否有更好的方法？

var divCount = $('.box').length; 
var visible = divCount; 
var hidden = 0; 
var check = true; 
var counter = 0; 


$('.button').click(function() { 

if (hidden < divCount && check == true) { 
    $('.box').eq(counter).fadeOut('slow'); 
    counter ++; 
    hidden ++; 
    visible --; 
} 
else { check = false; } 

if (visible < divCount && check == false) { 
    $('.box').eq(counter-1).fadeIn('slow'); 
    counter --; 
    hidden --; 
    visible ++; 

} 
else { check = true} 

}); 

和這裏的文件http://jsfiddle.net/vtgr2dns/

Answer 1

，或者你可以使用這個技術，它是一個有點比其他的更復雜，但它不需要引擎循環遍歷所有可見/隱藏元素（可以是5或1000），每次按鈕被點擊時

var divCount = $('.box').length; 
    var visible = $('.box:visible').length; 
    var hidden = $('.box:hidden').length; 
    var check = true; 
    var counter = 0; 

$('.button').click(function() { 

    if (visible == divCount) {check = true} 
    if (hidden == divCount) {check = false } 

    if (check) { 
     $('.box').eq(counter).fadeOut('slow'); 
     visible--; 
     hidden++; 
     counter++; 
    } 

    if (!check) { 
     $('.box').eq(counter - 1).fadeIn('slow'); 
     visible++; 
     hidden--; 
     counter--; 
    } 

}); // end click 

Answer 2

這個怎麼樣的副本？我只是切換每個項目上隱藏的一類。我需要知道我是前進還是後退。如果我撞到牆上（沒有結果返回），那麼我改變方向。我把它放進你的jsfiddle，它似乎工作。

var goingForward = true; 
function fade(o){ 
    if (goingForward) 
     $(o).fadeOut('slow'); 
    else 
     $(o).fadeIn('slow'); 
    $(o).toggleClass('hidden'); 
} 

function processClick() { 
    var item = $('.box' + (goingForward ? ':not(.hidden):first' : '.hidden:last')); 
    fade(item); 
    return $(item).length; 
} 

$(document).ready(function() { 
    $('.button').click(function() { 
     if(processClick()==0) { 
      goingForward = !goingForward; //switch directions and go again 
      processClick(); 
     } 
    }); 
}); // end ready 

Answer 3

在這裏，我給你一個更簡單的辦法，這樣你就可以擺脫變量：

var divCount = $('.box').length; 
var check = true; 
$('.button').click(function() { 
    if($(".container .box:visible").length == divCount){ 
     check = true; 
    } 
    if($(".container .box:visible").length == 0){ 
     check = false; 
    } 
    if(check == true){ 
     $(".container .box:visible:first").fadeOut("slow"); 
    }else{ 
     $(".container .box:hidden:last").fadeIn("slow"); 
    } 
});