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.
[code lang=”js”]
/* 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