you can resolve this using promises:
var credits = $('#credits'),
container = credits.parent(),
conPos = container.position(),
creditsText = credits.find('span'),
first = 0;
delay = 1000,
count = creditsText.length;
container.fadeIn('slow', function() {
function next() {
var span = $(creditsText.get(first));
if (!span) return;
$.when(
span
.css({
'top': ( conPos.top - span.height() ),
'left': ( ( ( conPos.left + container.width() ) - span.width() ) / 2 )
})
.animate({
'top': ( ( ( conPos.top + container.height() ) - span.height() ) / 2 ),
'opacity': '1.0'
}, { duration: 4000}
)
).then(function(){
return span.fadeOut(5000);
}).then(next);
first++;
}
next();
});
we are dealing with code that must be ran in a series, and must wait for the previous to finish. promises deal with this in a nice and clean way