jquery animate: change the element's opacity one by one

Any idea how to animate the opacity of each certain element one by one up to 16 targets/ elements only?

This will change the opacity of the elements all together,

$('.block-item').animate({
        opacity:0
    },500);

Have a look here.

But I want the opacity to change one after another. and this will stop when it reaches the 16th element.

Here is the html,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

I came out this function but it crashes any browser on it,

function opacity_test(index)
{
    $('.block-item').eq( index ).animate({
        opacity:0
    },500);

    setInterval( function() {
        opacity_test(index + 1);
    }, 1000 );
}

Thanks.