2


0

JQuery-div / imagesのセットをランダムに1つずつ非表示にします

目に見えるdivまたは画像のセットがあります。 1つのアイテムをクリックして、他のdiv / imagesを非表示にしたいと思います。 しかし、それは+でなければなりません - ランダムに+ - fadeOut()outまたはhide()を使用して1つずつ。
- (多分アニメーション化)

私のHTML:

Box no 1
Box no 2
Box no 3
Box no 4

Box no 5
Box no 6
Box no 7
Box no 8

Box no 9
Box no 10
Box no 11
Box no 12

私のコードはこれまでのところ:

$(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

    });
});

私はhttp://github.com/Bastes/jQuery.Random/blob/master/jquery.random.js[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 Answer


2


`item_box`要素をクリックすると、表示されているボックスの1つがランダムに非表示になります。

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

これにより、5秒以内にランダムに選択された時間にすべてのボックスが非表示になります。

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