10 Useful jQuery Snippets for Creating Fade Effects

17 Apr 2011

jQuery is being used by more and more web designers nowadays to create simple animation in web pages. One of the most commonly used effect is the fade in/out effect which is used in image slideshows, button hovers, page loads and more.

Here’s a roundup of 10 useful jQuery code snippets that can be used to create fading effects.

jQuery Innerfade

This script creates a slideshow of crossfading images or text. View demo and complete instructions here.

/* make sure to reference the latest version of jquery 
and jquery.innerfade.js */

<script type="text/javascript">
jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready( function(){
    animationtype: 'fade',
    speed: 1000,
    timeout: 5000,
    type: 'sequence',
    containerheight: '250px'
} );

/* This can be used with any container tag like divs or uls, 
the id of the containing div, ul, etc. has to match the id above */

FadeCycle Images

This script uses the FadeIn and FadeOut method to cycle through a number of images in a DIV element.

$('.imageWrapper div:not(:first)').hide();
var length = $('.stores .imageWrapper div').length;
function animateLogo() {
    index = (index >= length)? 1 : index+1;
    $('.imageWrapper div:nth-child('+index+')').delay(2000).

jQuery Button Fade

#background {
    background-image: url(background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: inherit;
.button {
    z-index: 100;
img.dlon {
    position: fixed;
    z-index: 10;
img.dloff {
    position: fixed;
    float: right;
    margin-top: 100px;
//Button fade jquery
    function() {
    $(this).stop().animate({"opacity": "0"}, "fast");
    $("").fadeIn().animate({"opacity": "0"}, "fast");

function() {
    $(this).stop().animate({"opacity": "1"}, "fast");
    $("").stop().animate({"opacity": "1"}, "fast");
<div id="background" >
    <div id="background.button">
    <a id="clickableArea">
    <img width=340 height=72 border=0 alt="Download Toolbar!" src="button_on.jpg" 
    <a id="downloadNow" href="http://some_url">
    <img width=340 height=72 border=0 alt="Download Toolbar!" src="button_off.jpg" 

Fading Effect when Loading Pages

This script creates a fade-in effect when on a web page.

//on top of page
    $.ajaxSetup ({

// Disable caching of AJAX responses */
    cache: false
//fire jQuery when hitting the back button
    history.navigationMode = 'compatible';
//page effects
$("body").css("display", "none");
    linkLocation = this.href;
    $("body").fadeOut(500, function() {
    window.location = linkLocation;
&lt;!-- property to fix bfcache for firefox 3.5 -->
&lt;body onunload="">

jQuery Slow Hover Fade

This one creates a slow fading hover effect on an element.

this.check = this.check || 1;
this.check++%2==0 ? 1 : 0.4);

jQuery Crossfade Plugin

This is a basic jQuery crossfade plugin that should be executed on a list object (ul or ol) because it specifically looks for li children. The plugin, as implemented, has two options, speed and pause.

    (function($) {
    $.fn.dfcrossfade = function(options) {
    //options, obviously
    var defaults = {
    speed: 800,
    pause: 3000
    options = $.extend(defaults, options);
    this.each(function() {
    //grab this item and the list items (children)
    //this way, the children are cached and not your
    //not constantly selecting the items from the dom
    var $this = $(this),
    $children = $this.children("li");
    //set css styling for selected item and the children
    'position' : 'relative',
    'list-style' : 'none',
    'position' : 'absolute',
    'left' : 0,
    'z-index' : 0
    var $first = $children.eq(0), //grab first element (top item)
    $next, //initalize variable to hold the next item
    length = $children.length, //determine length of the array
    index = 0; //initialize an index variable
    //set z-index of the first item to 2, above all others
    //because all others are 0
    $first.css({ 'z-index' : 2 });
    //start yor timer
    var timer = window.setInterval(function() {
    //determine if your at the end of the array
    //if so, set index to the first item
    //otherwise, increment to the next index
    if (!$children.eq(index+1).length) { index = 0; }
    else { index++; }
    //grab the next item
    $next = $children.eq(index);
    //set z-index for the next item so that it is, one above all other elements
    //but one under the top item
    $next.css({ 'z-index': 1 });
    //fade the top item out, revealing the next item
    $first.fadeTo(options.speed, 0, function() {
    //then just set the z-index to the lower level
    //and fade it back in
    $first.css({ 'z-index' : 0 }).fadeTo(0,1);
    //set the next, now the top, item to the top level
    $next.css({ 'z-index' : 2 });
    //make the new top item, $first
    $first = $next;
    }, options.pause);
    return this;

jQuery Hover Toggle

This code snippet will enable fade in and fade out on hover of a DIV.

//Image hover functions
$("#bot_left").hover(function () {
function () {

jQuery Color Fade

This one fades a text to different colors.

// Fade from yellow to white
// Fade from blue to white
// Fade from black to white, real fast

jQuery Link Background Fade

This code simply fades the background image of a link you have hovered over to a certain color, then fades it back to the original color.

//Grab the original BG color of the link
    var originalBG = $(".animate").css("background-color");
//The color you want to fade too
    var fadeColor = "#CCCCCC";
//Now animate on links with class = animate
    $(".animate").hover(function() {
    //Fade to the new color
    .animate({backgroundColor:fadeColor}, 750)
    //Fade back to original color

Simple jQuery Image Rotator

A simple image fader to rotate around a few images. Name the images accordingly, like in this example, car1.jpg, car2.jpg, car3.jpg, etc.

/* Image Cycle */
var faderSettings = {
    timing: 5000,
    fadeSpeed: 400,
    numberOfImages: 4,
    imagePrefix: "car",
    imageSuffix: ".jpg",
    imageDirectory: "../images/"

    var displayImage = function(displayImage) {
    var imageURL = faderSettings.imageDirectory + displayImage;
    $("#imageContainer").fadeOut(faderSettings.fadeSpeed, function(){
    'backgroundImage': 'url('+ imageURL + ')'

    function outer(){
    var a = 1;

    function inner(){
    a = 1;
    } else {a++;}
    var imageNeeded = faderSettings.imagePrefix + a + faderSettings.imageSuffix;
    return inner;
    var imageFade = outer();
    var cycleMe = setInterval(imageFade, faderSettings.timing);

Author - Azhar Kamar
3 Comments Revolving around this Article
  1. farhaan says:

    it’s very usfull thx

  2. sabaq Ahmad says:

    Awesome Bro…. excellent

  3. daigoume says:

    this post is very usefull thx!

Write a Comment! NOW! :)

Current ye@r *