Use async recursion: http://jsfiddle.net/7TQCr/2/
function fadeOut(elements, callback)
{
if (elements.length){
elements.eq(0).addClass('fade');
elements.eq(0).delay( 2000 ).slideUp(1000, function(){
elements.eq(0).removeClass('fade');
fadeOut(elements.slice(1), callback);
});
}
else {
callback();
}
}
$(function(){
fadeOut($('#twitter-feed div'), function(){
alert("done");
});
});
Updated to do your specific fade and class requirements.
Infinite fadeout/fadein version http://jsfiddle.net/7TQCr/4/:
function fadeOut(elements, callback)
{
if (elements.length){
elements.eq(0).addClass('fade');
elements.eq(0).delay( 2000 ).slideUp(1000, function(){
elements.eq(0).removeClass('fade');
fadeOut(elements.slice(1), callback);
});
}
else {
callback();
}
}
function fadeIn(elements, callback)
{
if (elements.length){
elements.eq(0).addClass('fade');
elements.eq(0).delay( 2000 ).slideDown(1000, function(){
elements.eq(0).removeClass('fade');
fadeIn(elements.slice(1), callback);
});
}
else {
callback();
}
}
function infinite(){
fadeOut($('#twitter-feed div'), function(){
fadeIn($('#twitter-feed div'), function(){
infinite();
});
});
}
$(function(){
infinite();
});