Execute Functions In Order

by each

HTML

<span class="queue">1</span><span class="queue">2</span><span class="queue">,</span><span class="queue">4</span><span class="queue">6</span><span class="queue">8</span>&nbsp;<span class="queue">i</span><span class="queue">t</span><span class="queue">e</span><span class="queue">m</span><span class="queue">s</span>

<br /><br /><a href="#" id="trigger">Trigger</a>

JavaScript

$('#trigger').click(function() {

    var queue = $('.queue');
    
    queue.css('opacity', 0).each(function(index) {
        $(this).delay(100*index).animate({opacity: 1.0}, 250, function() {
            if(index == queue.length - 1) {
                alert('Done!');  
            } 
        });
    });

    return false;
    
});