Javascript-форум - Постепенное открытие картинки

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Постепенное открытие картинки (https://javascript.ru/forum/events/62764-postepennoe-otkrytie-kartinki.html)

Постепенное открытие картинки

Здравствуйте. Стоит следующая задача:
есть картинка и необходимо постепенно ее открывать. Чтобы было понятнее вот как сейчас реализовано:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script src="script.js"></script>
    <style>
        .block{
         position:absolute;
            width:423px;
        height: 423px;
        }
        .white{
        background-color:black;
        width:141px;
        height: 141px;
            float:left;
            position: relative;
         }
        .wrapper{
        width:423px;
        height: 423px;
        }
    </style>
</head>
<body>
    <div class="block"><img src="5087_msize.jpg"></div>
    <div class="wrapper">   
    <div class="white" id="1"></div>
    <div class="white" id="2"></div>
    <div class="white" id="3"></div>
    <div class="white" id="4"></div>
    <div class="white" id="5"></div>
    <div class="white" id="6"></div>
    <div class="white" id="7"></div>
    <div class="white" id="8"></div>
    <div class="white" id="9"></div>
    </div>
</body>
</html>

Тут у нас блок с картинкой, и поверх ее 9 блоков с черными квадратами. Затем яваскриптом делаю так, чтобы эти блоки исчезали в рендомном порядке.

$(document).ready(function(){
function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }

var random;
var timerId = setInterval(function() {
random = randomInteger(1,9);
console.log(random);
$("#"+random).css("background-color","transparent");
}, 1000);
});

Сразу сталкиваюсь с такой проблемой: когда я рендомно генерирую числа, они повторяются. И как следствие блок с каким либо ID может очень долго не пропадать. У меня есть мысль что стоило бы все блоки заключить в массив и рендомно выбирать значение оттуда, после чего убирать его из массива и проводить следующую итерацию. Но как это сделать не совсем понимаю:(

galiog,
добавляйте класс -- соберите элементы без этого класса, если есть такие, выберите случайно из них любой, повторите действия если таких нет обнулите интервал.

открытие картинки случайными блоками

galiog,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script>
$(function() {
    var a = $(".white");
    (function c() {
        a = a.filter(":not(.air)");
        var b = a.length;
        b && (b = Math.random() * b | 0, a.eq(b).addClass("air"), window.setTimeout(c, 1000))
    })()
});</script>
    <style>
        .white.air {
          background-color: transparent;
        }

        .block, .block img{
         position:absolute;
            width:423px;
        height: 423px;
        }
        .white{
        background-color:black;
        width:141px;
        height: 141px;
            float:left;
            position: relative;
         }
        .wrapper{
        width:423px;
        height: 423px;
        }

    </style>
</head>
<body>
    <div class="block"><img src="http://profismart.org/album/02/852_Manowar_5.jpg"></div>
    <div class="wrapper">
    <div class="white" id="1"></div>
    <div class="white" id="2"></div>
    <div class="white" id="3"></div>
    <div class="white" id="4"></div>
    <div class="white" id="5"></div>
    <div class="white" id="6"></div>
    <div class="white" id="7"></div>
    <div class="white" id="8"></div>
    <div class="white" id="9"></div>
    </div>
</body>
</html>

Большое спасибо!