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

part-1：我想每次单击一个按钮时逐渐淡出未知数量的div，这些div都具有相同的class属性。用一个按钮隐藏和取消隐藏多个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/

来源

2014-10-17 Mirna Maalouf

请问一个比“任何建议”更具体的问题。什么不是你想要的方式？ – Oguk 2014-10-17 23:53:05

，或者你可以使用这个技术，它是一个有点比其他的更复杂，但它不需要引擎循环遍历所有可见/隐藏元素（可以是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

来源

2014-10-18 15:52:21 yokimoto

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

来源

2014-10-18 00:52:24 Brett

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

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

来源

2014-10-18 02:04:42

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

回答

相关问题