chained animations

by lovromar

HTML

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

CSS

#wrapper {
    width: 315px;
    overflow: hidden;
    margin: 2em auto;
}

div.box {
    width: 100px;
    height: 100px;
    margin: 0 5px 5px 0;
    float: left;
    background: #333;
}

JavaScript

$(function() {
    
    var time = 0;
    
    $('div.box', document.getElementById('wrapper')).each(function() {
        
        $(this).delay(time).animate({opacity: 0.5}, 1000);
        
        time += 1000;
        
    });
    
});