Animate BackgroundPosition Y-Axis = no work

Animate BackgroundPosition Y-Axis = no work

heyo,
me be having some issues with jquery animate.
im trying to create a navigation menu that apon mouseover, the background image animates with a negative y value. apon mouseout, the div will animate the background position back to zero. Simple enough ay? thats what i thought. When i roll over the divs with the bg image, they do not animate, it appears like a simple background change. in other words, there is no tween or movement, just ...new position.

INCLUDES
<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/custom.js" type="text/javascript"></script>


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

});

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

}
function bMouseOut(e)
{
      $(this)
            .animate({backgroundPosition: _getCurPos(this.id) +'px 0px'},
                  {duration: 'slow'});

}

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;
}

CSS

#buttons {
   margin:auto;
   width:787px;
   height:81px;
   background-image:url(images/nav3.png);
   z-index:101;
}

#divider {
   width:2px;
   height:81px;
   background-image:url(images/nav.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;
}


HTML
<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>


Image

Image


As i said, the animate property will not MOTION or TWEEn in the YAXIS, it will however as i tried animate in the XAXIS. got me stumped and at deadlock. Big cookie for genius who solves dis. =)
thx in advance!!!
-Jay[/code]