Question

我有一组可见的div /或图像。通过单击一个项目，我想隐藏其他div / images。但它应该是
- 随机
- 逐个使用fadeOut（）out或hide（） - （可能是动画的）

我的HTML：

<DIV class="myDivBox">Box no 1</DIV>
<DIV class="myDivBox">Box no 2</DIV>
<DIV class="myDivBox">Box no 3</DIV>
<DIV class="myDivBox">Box no 4</DIV>

<DIV class="myDivBox">Box no 5</DIV>
<DIV class="myDivBox">Box no 6</DIV>
<DIV class="myDivBox">Box no 7</DIV>
<DIV class="myDivBox">Box no 8</DIV>

<DIV class="myDivBox">Box no 9</DIV>
<DIV class="myDivBox">Box no 10</DIV>
<DIV class="myDivBox">Box no 11</DIV>
<DIV class="myDivBox">Box no 12</DIV>

我的代码到目前为止：

$(document).ready(function(){
    // I know, this will hide all items of class .itembox
    $(".item_box").click(function (event)
    {

        $(".item_box").random().fadeOut(); // using a random class to hide 

    });
});

我正在使用github处提供的随机插件：

(function($) 
{
  jQuery.fn.random = function(num) {
  num = parseInt(num);
  if (num > this.length) return this.pushStack(this);
  if (! num || num < 1) num = 1;
  var to_take = new Array();
  this.each(function(i) { to_take.push(i); });
  var to_keep = new Array();
  var invert = num > (this.length / 2);
  if (invert) num = this.length - num;
  for (; num > 0; num--) {
  for (var i = parseInt(Math.random() * to_take.length); i > 0; i--)
  to_take.push(to_take.shift());
  to_keep.push(to_take.shift());
}
if (invert) to_keep = to_take;
return this.filter(function(i) { return $.inArray(i, to_keep) != -1; });
};
}) (jQuery);

即使没有随机插件，有没有办法可以实现这一点？感谢

Answer 1

当您单击item_box元素时，这将随机隐藏其中一个可见框：

$(function(){
  $(".item_box").click(function() {
    var $visible = $(".myDivBox:visible");
    $visible.eq(Math.floor(Math.random() * $visible.length)).hide('slow');
  });
});

这将在五秒内随机选择时间隐藏所有框：

$(function(){
  $(".item_box").click(function() {
    $(".myDivBox").each(function(i, e){
      window.setTimeout(function() {
        $(e).hide('slow');
      }, Math.random() * 5000);
    });
  });
});

JQuery - 随机隐藏一组div / images

1 个答案: