Question

part-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/

的副本

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

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

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

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

3 个答案: