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.

/* 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;
    });
});

&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.

$('.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);

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

    it’s very usfull thx

  2. sabaq Ahmad

    Awesome Bro…. excellent

  3. daigoume

    this post is very usefull thx!

Write a Comment! NOW! :)

Current ye@r *