iterate through array for jQuery animations?.

[eluser]umbungo[/eluser]
I am trying to do successive animations based on the contents of an array. Here is what i thought it should have been;

Code:

arr = [ "First", "Second", "Third", "Forth" ];
for(index in arr){
    $('#fade').fadeOut(2000, function(){
        $('#fade').html(arr[index]).fadeIn(2000);
    });
}

However this fades straight to 'fourth', presumably because it iterates through the array without waiting for the animations. What should i be doing instead?