JQuery - случайным образом скрывает набор элементов div / изображения - PullRequest
Новая
       16

JQuery - случайным образом скрывает набор элементов div / изображения

2 голосов
/ 15 сентября 2010

У меня есть набор видимых элементов div / или изображений. щелкнув по одному элементу, я хотел бы скрыть другие элементы / изображения. Но это должно быть
- случайно
- один за другим с 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);

Есть ли способ, которым я могу получить это даже без случайного плагина? Спасибо

1 Ответ

2 голосов
/ 15 сентября 2010

Это случайным образом скроет одно из видимых полей, когда вы щелкнете по элементу 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);
    });
  });
});
...