jQuery: advanced fading effect

by lovromar

HTML

<div id="img">
<img src="https://lh6.googleusercontent.com/-lNpz4tOXd9g/T_sUD3p7oOI/AAAAAAAABCI/tR10yDlM33U/s550/img14.jpg" />
</div>

CSS

#img {
    width: 550px;
    height: 330px;
    margin: 2em auto;
    position: relative;
}

#img img {
    display: block;
    position: absolute;
}

div.piece-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

div.piece {
    width: 10%;
    height: 10%;
    background: #fff;
    float: left;
    display: none;
}

JavaScript

var sliceImage = function(target) {

    target = $(target);
    var i, len = 100,
        delay = 0;

    $('<div class="piece-wrapper"/>').
    appendTo(target);

    for (i = 0; i < len; i++) {

        $('div.piece-wrapper', target).
        append('<div class="piece"></div>');

    }



    $('div.piece-wrapper', target).show();
    $('div.piece', target).each(function() {

        $(this).queue('show', function(next) {

            $(this).delay(delay).show(15, next);

        });

        $(this).dequeue('show');

        delay += 10;

    });


};


setTimeout(sliceImage('#img'), 2000);