Content sliders, faders, and movers that manipulate images and text like a skilled magician can be very impressive.

Even when the effects are subtle, they go a long way toward demonstrating that a site is professional and modern. In this tutorial series, I am describing how to build a complex content manipulator similar to the one found on Mendocino County, California's official website.

In "Part One" and "Part Two" of this series, I laid the foundation for my example slider/fader.

When I left off, I had four "foils," each consisting of an image and some Latin text. The text portion of each foil was hidden, and all four foils were layered on top of each other so that only foil number four could be seen on page.

Step No. 4: Fade the Foils

The Mendocino County site smoothly fades from one image to the next, and I want to imitate that function on my example site. I am going to get this effect with JavaScript, or more specifically the jQuery JavaScript Library, which can dramatically speed development.

I start by adding a reference to an external JavaScript at the bottom of my HTML document.

<script src="js.js"></script>

Be sure that this reference comes after you have called the jQuery Library, since the code in the file will be dependent on jQuery.

For the basic fade effect, I am going to write three functions. The first function checks to learn if the document object model (DOM) is ready, meaning that the page has loaded. The section function will fade out the images from top to bottom and the third function will fade them in from bottom to top.

$(document).ready( function(){
	foils = $('#conceal > div'); 
	counter = (foils.length - 1);
	fadeFoils();
});

function fadeFoils(){	
	if(counter != 0){		
		$(foils[counter--] || []).delay(3600).fadeOut(1000, arguments.callee);
	}
	else{
		newCount = 1;
		showFoils();
		
	}
	
}

function showFoils(){
	if(newCount < foils.length){
		$(foils[newCount++] || []).delay(3600).fadeIn(1000, arguments.callee);
	}
	else{		
		counter = (foils.length - 1);
		fadeFoils();
	}
	
	
	
}

Now that you've seen the functions, I will describe them in some detail.

$(document).ready( function(){
	foils = $('#conceal > div'); 
	counter = (foils.length - 1);
	fadeFoils();
});

The line $(document).ready in jQuery basically says take the following action after the page loads. In this case the "action" to take after the page loads includes creating two variables and calling a function.

The foils variable uses a special jQuery "child selector" to collect all of the child elements for the element with the id of "conceal" that have a tag name of div. This can be confusing so I will restate it.

This "child selector" first identifies the parent element, #conceal; uses a ">" symbol to specify the parent-to-child relationship; and then identifies the child element or elements, in this case by a tag name.

variable = $(parent > children);

Or more specifically:

foils = $('#conceal > div'); 

All of the children are organized as an array, which is what the variable, foils, actually holds.

The "counter" variable will be used to iterate through the foils, which are the children of the "conceal" element. You may be accustomed to counters being set to zero at the start of an iteration. But since our foils are stacked so that foil number four is on top, we actually need to decrement through the array. That is start with the top and count backwards.

Since arrays use zero-based counting and the length attribute of an array uses 1-based counting, I needed to subtract 1 from the length when I set the variable.

counter = (foils.length - 1);

Next, I call a function called, fadeFoils().

fadeFoils();

This fadeFoils() function is, in fact, the second function in my current to-do list. This function should locate the foils and fade them out one by one.

function fadeFoils(){	
	if(counter != 0){		
		$(foils[counter--] || []).delay(3600).fadeOut(1000, arguments.callee);
	}
	else{
		newCount = 1;
		showFoils();
		
	}
	
}

The fadeFoils() function starts with a conditional statement that excludes the first element in the array, since I never want all of the foils to vanish.

if(counter != 0){	

The next section of the function uses a very clever approach to iterating through arrays sequentially. The concept is based on Dave Methvin's solution for automatic sequential effects. I picked up the technique from O'Reilly's jQuery Cookbook, which I reviewed for Ecommerce Developer in February 2010.

The secret to making this work is using arguments.callee as the callback function for the fade effect. JavaScript has several built in keywords, and arguments is one such keyword that refers to a local variable. Bottom line, it allows an anonymous function (the current function) to call itself.

Of course, my function is not anonymous. It has a name, fadeFoils(). But if I had called it by such, it would have thrown an error for too much recursion. The arguments keyword, which I must admit is all but deprecated, does the job without producing the error.

$(foils[counter--] || []).delay(3600).fadeOut(1000, arguments.callee);

I should also mention two more things about this line of code. First, notice how I am chaining two methods to the selector. jQuery makes this sort of chain very easy. Next, notice the actual methods.

First, .delay(). sets a timer that must run before the next method in the chain. In this case, I specified a delay of 3,600 milliseconds or 3 seconds. This is how long each foil will be completely visible before it starts to fade.

Next, I used the fadeOut() method to reduce the opacity of the foils — to zero — gradually over one second or 1,000 milliseconds. The fadeOut() method also accepts a callback, which, as described above, is arguments.callee.

The second or else part of my conditional statement is executed when the bottom slide is visible to the user. The else statement sets a new variable, which I will use as a counter, and calls the function showFoils().

	else{
		newCount = 1;
		showFoils();
		
	}

Finally, I write the showFoils() function, which is similar to fadeFoils(), but it counts up from the bottom foil to the top.

function showFoils(){
	if(newCount < foils.length){
		$(foils[newCount++] || []).delay(3600).fadeIn(1000, arguments.callee);
	}
	else{		
		counter = (foils.length - 1);
		fadeFoils();
	}	
	
}

Now, when the page is loaded my foils begin to fade. When the first three foils fade and only the bottom foil is visible, they will reappear one by one, each fading in, in turn.

Summing Up

In this third section of the tutorial, I have successfully demonstrated how to fade the stacked foils. In the next section, I will add some foil navigation that will allow a site visitor to jump from foil to foil.