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


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!


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

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

And this is how we made it fade in:

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

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

	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


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


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


Tested in:


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