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 or download.
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 or download (version 0.1 – updated 25th Feb 2010).