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.


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!


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


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.

4 thoughts on “Tutorial: How to create your own inner fade effect with jQuery

  1. Hi Clay,

    I have implemented the innerfade effect on my site but rather than giving fixed images iam picking them from a XML file, Iam generating a dynamic in a javascript file where iam reading the XML using jQuery. This dynamic iam puting in an asp label and putting it on the aspx page. Now when i run the site, the label is read but not the innerHTML because of which the innerfade effect does not show on the li. am i missing something?? The code i have written is as follows
    var LogoUrl;

    var Html = "";
    var Html = '';
    $.get("SponsorLogos.xml", {}, function(xml) {
    $('Logo', xml).each(function(i) {

    var LogoUrl = $(this).find("LogoUrl").text();

    //$("#img" + i).attr("src", LogoUrl);
    Html += '';

    Html += '';
    $("#lblImage").attr("innerHTML", Html);

  2. hahaha..i guess there isn't any attributes called 'innerHTML' in jQuery? Just use .html or .text will be good enough to act as innerHTML to place your found url into the image id 🙂

Comments are closed.