Tutorial: How to create your own inner fade effect with jQuery

Just when i though i have completely writing all the effect tutorial available, i neglected inner fade effect that has been around for quite some time. Maybe it look exactly like fade effect in jQuery and didn't really notice the differences. Just to explain what does inner fade effect differ from normal fade effect in jQuery, inner fade effect will display the combination of both images when the first image gets fade in. This produces an asynchronous effect of image being displayed together. On the other hand, normal fade effect produces fade in an synchronous way when one fade ended the other fade occurs. The demo can be view at the bottom of this tutorial.

Concept

The concept for an inner fade is much troublesome than a normal fade effect in jQuery. A normal fade effect in jQuery will only required the fadeIn,fadeOut or fadeTo method to be called by the chaining process. Inner fade effect will require an additional step which is to arrange the images into a stack. Similar to the shuffle concept but we will just have to use the built-in feature of jQuery, animate to complete this tutorial. Imagine you have a deck of cards, each touch will make the card slowly fade till disappear and display the next card. So, what happen to the disappeared card? Similarly, we set the displayed index to a lower value and hide it behind of the deck of cards. So when the deck of cards completely disappeared, it will fade to the start card again!

CSS and HTML

Similarly, it will be exactly the same as the shuffling tutorial.

Code

The CSS and HTML code will be pretty much the same as the shuffle effect tutorial. The only differences we will see in this tutorial compare to the shuffle effect tutorial is the jQuery code used to perform the task.

$(function(){
var i = 0;
$('div.card').click(function(){
$(this)
.animate({opacity: 0}, 1000, function(){$(this).css("z-index", i)})
.animate({opacity: 1}, 1000);
i--;
});
});

Notice that i did not use fadeTo method because the z-index command takes longer than the next animation to be display and cause the whole inner fade to fail. Thus, i use animate function instead and instruct jQuery to immediately set the z-index to i depth where i is the variable to keep track of the deepness of the container. This way i won't have to worry about the next animation coming forward quicker than the z-index rule. The other reason is that it seems buggy to use fadeTo function during this tutorial. Since, animate function work perfectly i will just stick to that then. From the demo page, you can notice that sometimes the colors are being combined and turn to some other color although there are only 4 colors available! This is the differences between inner fade and the normal fade. You can download the tutorial file at jquery-inner-fade-effect