While developing on a recent project, I needed to display some client quotes in the footer space of a website, and periodically rotate to another quote. Let me take this opportunity to say I am *not* a fan of drowning a website in dozens of third party javascript libraries / scripts. I feel the best approach, when dealing with javascript, is to stick with a single library such as jQuery, and modify where needed. Here is a simple script that utilizes the built in feature set of jQuery to create a fadeshow of content.
The concept here is to have an array of the content I want to ‘fade through’, loop through them sequentially, fade in an array element, show it for a bit, fade out that element, move to the next element in the array, fade in that array element, and keep it movin’. So, here is the solution. Nothing fancy, but a lightweight and scalable solution for all your fading pleasure:
Fadeshow Demo
Download the script
The download includes the latest stable release of jQuery, which as of this writing is 1.2.3. Click here to download the most recent jQuery release.
Step 1 : The HTML markup.
Call our javascript files in the head of the html page, and start the process by calling the fadeInContent() function onload. This function could be called anytime on this page, for example with a link or button click.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fadeshow.js"></script>
</head>
<body onload="fadeInContent();">
<div id="fadeshow" style="display: none"></div>
</body>
</html>
Step 2 : Setup some vars, and create our data array.
My array contains text only - the content that I want to swap out. You could just as easily drop in HTML content into any of the array elements. Here we also set a counter, so we know when we have reached the end of our array - so we can start back at the beginning. We also define, in milliseconds, the amount of time each element will show before fading out, and how long of a pause there is between iterations.
/* counter that gets incremented each iteration */
var counter = 0;
/* how long each array element shows */
var stamina = 2000; /* 2 seconds */
/* how long to pause between fading in the next element */
var intermission = 500; /* 1/2 second */
/* build our content array */
var fadeContent = new Array(
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"In placerat accumsan tortor.Etiam imperdiet orci eu justo.",
"Quisque risus justo, facilisis, ornare vel, eros."
);
Step 3 : The fadeInContent() and fadeOutContent() functions.
These two functions work in tandem with each other. When one has completed, it places a call to the other function. All this starts once the process is initialized by calling the fadeInContent() function.
/* swaps the content to the next element in the array,
then fades in the content */
function fadeInContent() {
/* reset the counter if we have reached the end */
if(counter == fadeContent.length) {
counter = 0;
}
/* swap the html content */
document.getElementById('fadeshow').innerHTML = fadeContent[counter];
/* then fade in the next element */
$('#fadeshow').fadeIn('slow');
setTimeout("fadeOutContent()",stamina);
}
/* fades out the current element, increments the counter,
then loops back to the previous function */
function fadeOutContent() {
/* fade out the current element */
$('#fadeshow').fadeOut('slow');
/* increment the counter */
++counter;
/* wait...then fade in the next element */
setTimeout("fadeInContent()",intermission);
}