Reveal a picture piece by piece

Question

I am trying to reveal a picture piece by piece. I found this thread here need ideas to only display some pixels and gray out the remaining pixels, with an excellent answer from

Answer 1

Here's a branch of corsiKa's fiddle with some mods, most significant of which is the way the pixels are removed, allowing a time period to be specified.

The need for the pixels to have ids is also avoided, therefore the HTML is simpler.

Answer 2

You need to change two things.

First is the size of the grey boxes. That is done with this

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:3px;height:3px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

Into something like this

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:10px;height:10px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

Then you need to change the for loop that puts the boxes in to match

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {

Turns into

for (var i = 0, len = $('#i').height(); i < len; i += 10) {
    for (var j = 0, len = $('#i').width(); j < len; j += 10) {

Here's the example !