Animated menu using jquery and sprite

This post explains how to make an animated menu using jquery and sprite.
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.


$(function() {
  // set opacity to nill on page load
  $("ul#menu span").css("opacity","0");
  // on mouse over
  $("ul#menu span").hover(function () {
   // animate opacity to full
   $(this).stop().animate({
    opacity: 1
   }, "slow");
  },
  // on mouse out
  function () {
   // animate opacity to nill
   $(this).stop().animate({
    opacity: 0
   }, "slow");
  });
 });


$(function() {
  // set opacity to nill on page load
  $("ul#menu span").css("opacity","0");
  // on mouse over
  $("ul#menu span").hover(function () {
   // animate opacity to full
   $(this).stop().animate({
    opacity: 1
   }, "slow");
  },
  // on mouse out
  function () {
   // animate opacity to nill
   $(this).stop().animate({
    opacity: 0
   }, "slow");
  });
 });