jQuery Plug-in: Simple Navigation Animation Stagger
It’s great when you run into old code that you’d completely forgotten about. While reviewing a couple of old sites I’d put together I ran into some old jQuery animation code the client had requested. I’ve used it on a couple of projects in the past, not always on the navigation; it can be used with any set of list items. So I popped it into a jQuery plug-in for quick deployment on future projects. View a demo.
jQuery.staggerNaver simply delays each fadeIn animation on a set of list items to create a type of ‘wave’ effect. The plug-in can accept an object with custom user settings:
1
2
3
4
5
6
7
8
9
//Plug-in usage
jQuery(function($){
$("#ourULorOL").staggerNaver({
animateTime: 150,
easing: "swing",
onePageOnly: false,
onePageSelector: "#home"
});
};
- animateTime: Time taken for fadeIn animation in milliseconds (default: 210)
- easing: Easing method used, requires the easing plug-in if not default (default: “swing”)
- onePageOnly: Use only on one page e.g. your home page (default: false)
- onePageSelector: If you are only using the animation on one page, what selector would identify to jQuery that you are on that page? (default: “#home”)
I’ve included the one page only setting because as with any set of page animation it can sometimes become very annoying, especially if it does it on every page load!
View a demo (version 0.1 – updated 25th Feb 2010).