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

WaveAnimate jQuery Plugin

A plugin to animate a selection of elements in a waveing way, from one side to the other, a little bit like a wave, hence the name.

Demo Usage Styling Download Compatibility Changelog

Demo

Basic demo with default settings and a callback to tell us that the effect finished. The fade out uses the reversed behavior:

 
 
 
 
 
 
 
 
 
 

The same thing, but with different settings. Fade Out uses the exponential setting and the Fade In uses the easing plugin to spice up the animation:

 
 
 
 
 
 
 
 
 
 

You can animate anything that jQuery Animate can handle, here's an example where we animate the width of the element. Additionally we have a children element that is intentionallly excluded from the effect:

 
 
 
 
 
 
 
 
 
 

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

Usage

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

$('#demo1').waveAnimate({ 
	reverse: true, 
	onFinish: function(){ 
		$('#demo1status').text('Fade Out Finished!') 
	}
});

And this is how we made it fade in:

$('#demo1').waveAnimate({ 
	onFinish: function(){ 
		$('#demo1status').text('Fade In Finished!') 
	} 
});

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

$('#demo1').waveAnimate({ 
	delay: 100, // delay between animations
	speed: 500, // duration of animation
	exponential: false, // normal or exponential
	properties: { opacity: 'toggle', height: 'toggle' }, // CSS
	reverse: false, // in which direction to affect the children
	affected: '.fademe', // the targeted children, empty for all children
	easing: 'linear', // the easing to use
	onFinish: function() {} // on finish callback function
});

Styling

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

Download

Current version: jquery.waveanimate-0.3.js (1.7k not minified)

Compatibility

Tested in:

With:

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

Changelog