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(){
$('#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 */
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;
animateLogo();
function animateLogo() {
index = (index >= length)? 1 : index+1;
$('.imageWrapper div:nth-child('+index+')').delay(2000).
fadeIn(1000,animateLogo).delay(2000).fadeOut(1000);
}
jQuery Button Fade
#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;
}
//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");
});
});
<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>
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");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, function() {
window.location = linkLocation;
});
});
<!-- property to fix bfcache for firefox 3.5 -->
<body onunload="">
jQuery Slow Hover Fade
This one creates a slow fading hover effect on an element.
$('.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);
});
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
$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);
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 () {
$("#bot_left_overlay").fadeIn("slow");
},
function () {
$("#bot_left_overlay").fadeOut("slow");
});
jQuery Color Fade
This one fades a text to different colors.
// 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});
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() {
$(this)
//Fade to the new color
.animate({backgroundColor:fadeColor}, 750)
//Fade back to original color
.animate({backgroundColor:originalBG},750)
},
function(){
});
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 */
//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);