Both fadeIn
and fadeOut
accept a callback function as the second argument which is executed after the animation finishes. You can take advantage of this function by placing the dynamic parts of your transition into an array. In my code, I have created a function which starts the transitions and then calls itself recursively via a callback function. With each recursion the next index is passed as an argument, which is used to retrieve the transition information from the array.
$(function() {
$('#text, #text2, #text3').hide();
var transitions = [
{id: 'text', delay: 600},
{id: 'text2', delay: 13500},
{id: 'text3', delay: 26500}
];
function perform(i){
$('#' + transitions[i].id).delay(transitions[i].delay).fadeIn(1500).delay(9000).fadeOut(2000, function(){
perform(++i % transitions.length);
});
}
perform(0);
});
JS Fiddle: http://jsfiddle.net/z5Wcd/