jQuery: display elements sequentially

HTML

<button id="run">Run</button>

<ul id="test">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

CSS

button {
    margin: 1em;
}

#test {
    margin: 1em;
}

#test li {
    width: 10em;
    margin-bottom: 1em;
    background: #ccc;
    padding: 0.5em;
    display: none;
}

JavaScript

$('#run').click(function() {
    var lis = $('li', '#test');
    var delay = 0;
    
    lis.each(function() {
        var li = $(this);
        li.queue('fade', function(next) {
            li.delay(delay).fadeIn(500, next);
        });
        
        li.dequeue('fade');
        
        delay += 250;
    });
});