jQuery: animazioni in catena con queue() e delay()

by gabrieleromanato

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

#wrapper {
    width: 80%;
    margin: 2em auto;
    height: 10em;
}

div.box {
    float: left;
    width: 28%;
    margin-right: 4%;
    height: 100%;
    background: black;
}

JavaScript

$(function() {
    var timer = 0;
    $('div.box').each(function() {
        var $box = $(this);
        $box.queue('opacity', function(next) {
            $box.delay(timer).animate({
                opacity: 0.5
            }, 1000, next);
        });
        $box.dequeue('opacity');
        timer += 1000;
    });
});