Q:

Getting a CSS value from $(this) in jQuery

So I have working code that animates a BG image via a plugin.  This is a general solution though where each element in the class has the same BG image; I'm using a sprite with a unique image for each column of my navigation bar.  THe code is thusly:
$('#nav a')
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    })

This works great, so I can set a Y-offset for each element, but each link has it's own x-offset that won't change/be animated at all.  Example CSS:
li.downloads a {
    background:url(img/navsprite.png) repeat -318px -9px;
}

I want to roll the -318px -9px to something like -318px 200px, but for another element I'd want to change -482px -9px to -482px 200px.  Only the Y-offset should change, but I don't know the syntax of jQuery well enough to pull that value from the CSS of $(this) element and put it into the animate parameters.  Thanks! 

A:

You can get the background position like this:
$(this).css("background-position");

You can get both values in an array like this:
var bgpos = $(this).css("background-position").split(" ");

Which allows you to access both values with bgpos[0] and bgpos[1].