用一个按钮一个一个地隐藏和取消隐藏许多 div答案

【问题标题】：hiding and unhiding many divs one by one with a single button用一个按钮一个一个地隐藏和取消隐藏许多 div
【发布时间】：2014-10-17 23:46:21
【问题描述】：

第 1 部分：我想在每次单击按钮时一个一个地淡出未知数量的 div，这些 div 都具有相同的类属性。

第 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/的副本

【问题讨论】：

请提出比“任何建议”更具体的问题。究竟是什么没有按照您想要的方式工作？

标签： jquery hidden

【解决方案1】：

这里我给你一个更简单的方法，这样你就可以摆脱变量了：

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");
    }
});

【讨论】：

【解决方案2】：

或者您可以使用这种技术，它比其他技术更复杂一些，但它不需要引擎在每次单击按钮时循环遍历所有可见/隐藏元素（可能是 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

【讨论】：

【解决方案3】：

这个怎么样？我只是在每个项目上切换一类隐藏。我需要知道我是前进还是后退。如果我撞到墙上（没有返回结果），那么我会改变方向。我把它放到你的 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

【讨论】：