Fading Quotebox for Craig Smith
HTML
<div id="quote">
<p> Funny stuff happens with Java Script </p>
<p> It's flexible, prototype-based, and beautiful! </p>
<p> I love it!! </p>
</div>
CSS
#quote {
width:50%; height:30px; /* use of min-height is more dynamic here, but sometimes results in a quick flash between the transition from one quote content to the next */
padding:1% 1%; margin:0 auto;
border:2px solid #CCC; }
#quote>p { display:none; }
JavaScript
$(function(){
var quote_lifetime = 3*1000;
var quote_fadetime = 200;
//--------
var $quote=$('#quote');
var active_quote=0;
var number_of_quote_innards=$quote.find("p").length;
function displayActiveQuote(){
$quote.find('p').fadeOut(quote_fadetime); // Fade out all quote contents
setTimeout(function(){ // After fadeOut'ing everything, we fade in the active quote.
$( $quote.find('p')[active_quote] ).fadeIn(quote_fadetime);
active_quote++; // incrementing the active_quote, and resetting it to zero if it's exceeded its bounds.
if (active_quote > number_of_quote_innards-1) active_quote=0;
},quote_fadetime);
}
displayActiveQuote();
setInterval(displayActiveQuote,quote_lifetime);
});