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).