function displayBannerAfter(selector, text, delay){ if(!delay) delay=0; setTimeout(function(){ displayBanner(selector,text); }, delay); } function displayBanner(selector,text){ // load this banner text (we will recurse later) thisText=text.shift(); // styling padding='60px 0px 60px 0px'; textAlign='center'; fontSize='15px'; foreColour='#eee'; maskColour='#000'; maskOpacity=0.4; // animation timing slideDuration=800; fadeInDuration=200; holdDuration=2000; fadeOutDuration=200; // loop through all images, generating their captions jQuery(selector).each(function(){ bannerText = jQuery(document.createElement('div')) .html(thisText) .height('auto').width(jQuery(this).width()) .css({fontSize:fontSize,padding:padding,textAlign:textAlign}) .css({opacity:1, backgroundColor:'transparent', position:'absolute',color:foreColour}) .prependTo(jQuery(this).parent()) .css('top',jQuery(this).position().top) .hide(); bannerCanvas = jQuery(document.createElement('div')) .html(thisText) .height('auto').width(jQuery(this).width()) .css({fontSize:fontSize,padding:padding,textAlign:textAlign}) .css({backgroundColor:maskColour, opacity:maskOpacity, position:'absolute',color:maskColour}) .prependTo(jQuery(this).parent()) .css('top',jQuery(this).position().top) .hide(); jQuery(bannerCanvas).slideDown(slideDuration,function(){ jQuery(bannerText).fadeIn(fadeInDuration).delay(holdDuration).fadeOut(fadeOutDuration,function(){ jQuery(bannerCanvas).hide('slow'); if(text.length){ displayBanner(selector,text); } }); }); }); }