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