jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

LivingFade jQuery Plugin

A plugin to fade in or out a selection of elements in a living way (randomly delayed and with random speeds).

Demo Usage Styling Download Compatibility Changelog


Basic demo with default settings and a calback to tell us that the effect finished:


The same thing, but with different settings and one element (the red one) has a different class, to demonstrate that you can define which childrens of an element will be faded and which not:


You can of course target any kind of element you want to affect. Anything in the DOM that jQuery can target can be used!


This is how we called the plugin for the fade out in the first demo above:

	onFinish: function(){ 
		$('#demo1status').text('Fade Out Finished!') 

And this is how we made it fade in:

	fadeTo: 1, 
	onFinish: function(){ 
		$('#demo1status').text('Fade In Finished!') 

Here's an example with all the possible options (deafults):

	maxDelay: 1000, // maximum delay before an element is faded in
	minSpeed: 500, // minimum fade speed (timespan of fade)
	maxSpeed: 250, // maximum fade speed
	fadeTo: 0, // 0 = fade out, 1 = fade in, 0.5 = half transparent
	affected: '.fademe', // class of affected children
	onFinish: function(){ } // callback after all fades have finished


Well, feel free to style your elements however you want. ;-)


Current version: jquery.livingfade-0.2.js (1.3k not minified)


Tested in:


There really is nothing complicated in there, so expect the plugin to work in older browsers as well.