Azharkamar.com

10 Useful jQuery Snippets for Creating Fade Effects

Snippets
17 Apr 2011
3 comments

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(){
$(‘#news’).innerfade({
animationtype: ‘fade’,
speed: 1000,
timeout: 5000,
type: ‘sequence’,
containerheight: ‘250px’
});
} );
</script>

/* 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 */
[/code]

FadeCycle Images

This script uses the FadeIn and FadeOut method to cycle through a number of images in a DIV element.
[js]
$(‘.imageWrapper div:not(:first)’).hide();
var length = $(‘.stores .imageWrapper div’).length;
animateLogo();

function animateLogo() {
index = (index >= length)? 1 : index+1;
$(‘.imageWrapper div:nth-child(‘+index+’)’).delay(2000).
fadeIn(1000,animateLogo).delay(2000).fadeOut(1000);
}
[/js]

jQuery Button Fade

[css]
#background {
background-image: url(background.jpg);
background-position: center;
background-repeat: no-repeat;
min-height:422px;
min-width:308px;
height: inherit;
}

.button {
z-index: 100;
}

img.dlon {
position: fixed;
z-index: 10;
cursor:pointer;
}

img.dloff {
position: fixed;
float: right;
margin-top: 100px;
}
[/css]

[js]
//Button fade jquery
$(document).ready(function(){

$("img.dlon").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
$("img.free").fadeIn().animate({"opacity": "0"}, "fast");
},

function() {
$(this).stop().animate({"opacity": "1"}, "fast");
$("img.free").stop().animate({"opacity": "1"}, "fast");
});

});
[/js]

[html]
<div id="background" >
<div id="background.button">
<a id="clickableArea">
<img width=340 height=72 border=0 alt="Download Toolbar!" src="button_on.jpg"
class="dloff"></a>
<a id="downloadNow" href="http://some_url">
<img width=340 height=72 border=0 alt="Download Toolbar!" src="button_off.jpg"
class="dlon"></a>
</div>
</div>
[/html]

Fading Effect when Loading Pages

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

[js]
//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");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, function() {
window.location = linkLocation;
});
});

&lt;!– property to fix bfcache for firefox 3.5 –>
&lt;body onunload="">
[/js]

jQuery Slow Hover Fade

This one creates a slow fading hover effect on an element.
[js]
$(‘.selectorClass’).hover(
function(){
$(this).stop().fadeTo(‘slow’,0.4);
},
function(){
$(this).stop().fadeTo(‘slow’,1);
});

$(‘.selectorClass2’).mouseenter(function(){
$(this).stop().fadeTo(‘slow’,0.4);
}).mouseleave(function(){
$(this).stop().fadeTo(‘slow’,1);
});

$(‘.selectorClass3’).hover(function(){
this.check = this.check || 1;
$(this).stop().fadeTo(‘slow’,
this.check++%2==0 ? 1 : 0.4);
});
[/js]

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.

[js]
(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
$this.css({
‘position’ : ‘relative’,
‘list-style’ : ‘none’,
});

$children.css({
‘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);
[/js]

jQuery Hover Toggle

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

[js]
//Image hover functions
$("#bot_left").hover(function () {
$("#bot_left_overlay").fadeIn("slow");
},
function () {
$("#bot_left_overlay").fadeOut("slow");
});
[/js]

jQuery Color Fade

This one fades a text to different colors.

[js]
// Fade from yellow to white
$(‘p’).color_fade();

// Fade from blue to white
$(‘p’).color_fade({from:’blue’,to:’white’});

// Fade from black to white, real fast
$(‘p’).color_fade({from’black’,to:’white’,speed:100});
[/js]

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.

[js]
//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() {
$(this)
//Fade to the new color
.animate({backgroundColor:fadeColor}, 750)
//Fade back to original color
.animate({backgroundColor:originalBG},750)
},
function(){
});
[/js]

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.

[js]
/* Image Cycle */
//Settings
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(){
$(this).css({
‘backgroundImage’: ‘url(‘+ imageURL + ‘)’
}).fadeIn(faderSettings.fadeSpeed);
});
};

function outer(){
var a = 1;

function inner(){
if(a==faderSettings.numberOfImages){
a = 1;
} else {a++;}
var imageNeeded = faderSettings.imagePrefix + a + faderSettings.imageSuffix;
displayImage(imageNeeded);
}
return inner;
}
var imageFade = outer();
var cycleMe = setInterval(imageFade, faderSettings.timing);
[/js]

Author - Azhar Kamar