0

我有大约 72 个部门的 class="box"

这些是覆盖我整个页面的一些黑色框，我想在我的功能完成后一个一个地随机删除这些分区。

这是我随机删除这些盒子的方法，

function removeBoxes(){

    var erase;
            //var to store the length of array of divisions
    var total = $(".box").length;
    while(total > 0)
    {
              //generating a random number
        erase = Math.floor(Math.random() * total);
        $(".box").eq(erase).fadeOut(10000, function(){
            $(this).remove();
        });
        total = $(".box").length;
    }
}

后来我还会在两次移除之间添加一些时间延迟，但现在我只想知道如何一一移除这些盒子。

4

3 回答 3

5

一个小插件怎么样：

(function($) {
    $.fn.random = function() {
        var n = this.length;
        var r = Math.floor(n * Math.random());
        return n ? $(this[r]) : $();
    };
})(jQuery);

用法：

(function iterate() {
    $('.box').random().fadeOut(1000, function() {
        $(this).remove();
        iterate();
    });
})();

元素将一次消失一个，当没有更多.box元素时循环将自动终止。

有关演示，请参见http://jsfiddle.net/alnitak/cddhL/。

于 2013-03-09T09:28:55.537 回答
0 
function removeBoxes(){

    var total = $(".box").length - 1;
    var randomnumber = Math.floor(Math.random()*total);
    jQuery(".box:eq('"+randomnumer+"')").fadeOut(1000, function() {
        $(this).remove();
    });
}

//这是每5秒删除一次DIV

setInterval(function(){ 
    removeBoxes();    
}, 5000);

我希望这可以帮助:)

于 2013-03-09T09:32:12.853 回答
0

您已经知道如何在淡出后触发某些内容，即在您已经删除框的回调中执行此操作。不要使用循环，而是编写一个只删除一个随机框的函数，并在回调中调用它。

例子：

function removeRandomBox() {
  var boxes = $(".box"); // don't repeatedly search for the boxes
  var total = boxes.length;
  if (length > 0) {
    var erase = Math.floor(Math.random() * total);
    boxes.eq(erase).fadeOut(10000, function(){
       $(this).remove();
       removeRandomBox();
    });
  }
}
于 2013-03-09T09:34:34.377 回答