.Animate backgroundPosition 0px -81px - JUMP (No Animation)

.Animate backgroundPosition 0px -81px - JUMP (No Animation)

Hello guys!
First off, BIG cookie rewarded to the one who answers this question.
Ive worked with .Animate before. I am having a problem with this new animation i am trying to pursue. I want the backgroundPosition to animate in the Y-Axis -81px apon mouseover and back to 0PX apon mouseout.

In the event of a mouseover, the animation of the backgroundPosition just jumps to the position of -81px with no animation. On mouseout, the backgroundPosition jumps to back to original position being 0px.


HTML & CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jay Cantwell Profle & Portfolio</title>

<script src="javascript/jquery-1.3.2.js" type="text/javascript"></script>
<script src="javascript/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="javascript/please.js" type="text/javascript"></script>

<style type="text/css">
body {
   background-color: #FFFFFF;
   margin-left: 0px;
   margin-top: -5px;
   margin-right: 0px;
   margin-bottom: 0px;
   min-width:900px;
   text-align:center;
}
#wrapper {
   background-image:url(images/bg.png);
   background-repeat:repeat-y;
   margin:auto;
   border-color:#00FF00;
   width:900px;
   height:1000px;
   text-align:center;
   z-index:-1;
}
#nbar {
   margin-top:100px;
   text-align:center;
   width:100%;
   height:109px;
   background-image:url(images/bar.png);
   background-repeat:repeat-x;
   padding-top:14px;
   z-index:1;
   position:absolute;
}
#buttonspace {
   margin:auto;
   height:81px;
   width:900px;
}
#buttons {
   margin:auto;
   width:787px;
   height:81px;
   background-image:url(images/nav3.png);
   z-index:101;
   overflow:hidden;
}

#divider {
   width:2px;
   height:81px;
   background-image:url(images/nav3.png);
   background-position:0px -81px;
   float:left;
}
#about, #portfolio, #downloads, #contact, #blog{
   background-image:url(images/nav2.png);
   background-attachment: scroll;
   background-repeat:no-repeat;
   width:157px;
   height:81px;
   float:left;
}

</style>
</head>
<body>
<div id="nbar">
  <div id="buttonspace">
    <div id="buttons">
      <div id="divider"></div>
      <div id="about"></div>
      <div id="portfolio"></div>
      <div id="downloads"></div>
      <div id="contact"></div>
      <div id="blog"></div>
    </div>
  </div>
</div>
</body>
</html>


And the Java-script / JQuery

var navies = ['#about','#portfolio', '#downloads', '#contact', '#blog'];

$(document).ready(function()
{
   for (i=0; i<navies.length; i++)
   {
      $(navies[i]).css({backgroundPosition: -(i*157+2) +'px 0'});
      $(navies[i]).bind('mouseenter', bMouseOver);
      $(navies[i]).bind('mouseout', bMouseOut);
   }
   
});

function bMouseOver(e)
{
      $(this)
            .stop()
            .animate({backgroundPosition: _getCurPos(this.id) +'px -81px'},
                  {duration: 500});
}
function bMouseOut(e)
{
      $(this)
            .stop()
            .animate({backgroundPosition: _getCurPos(this.id) +'px 0px'},
                  {duration: 500 });
}

function _getCurPos(name)
{
   //alert(name.toString() + " one time");
   for(i=0; i<navies.length; i++)
   {
      if('#' + name == navies[i])
      {
         return(-(i*157+2));   
      }
   }
   return 0;
}

Image

Image

In the end, i would like parent div being "Buttons" to have a stationary background being nav3.png with the child divs to have the animated background of the image nav2.png with the text.

I CAN however get the background to animate in the X-Axis, but not in the Y-Axis. Animating the marginTop does not produce the effect i need.

Any Ideas?

If you need any further information i will provide ASAP.

Thanks in advance!

-Jay