jQuery backgroundPosition not accepting multiple values?

I'm trying to animate motion in my body's background image using variables as the coordinates, but it seems like jquery's backgroundPosition only accepts one value. I tried a few things, like backgroundPosition: distance1 + " " + distance2, and backgroundPosition: distance1 + " -50px" (the value I want it to be at the whole time), but even if I set the top value in CSS, it just defaults to using my first value (left) for both. Any help would be appreciated!

function shiftBoxes(distance1, distance2, id){
    activeBtn('pos' + id.substring(4));
    $("#boxMover").animate({
        marginLeft: distance1
    }, 500, function() {});
    $(document.body).animate({
        backgroundPosition:开发者_运维技巧 distance2
    }, 500, function() {});
}
//Add one of these for every box
//The distance to move to the next box is always -1804(*("#pos" + n) - 1) pixels
$("#pos1").click(function() {
    shiftBoxes('0', '-1400', '#box1');
});
$("#pos2").click(function() {
    shiftBoxes('-1804', '-1200', '#box2');
});
$("#pos3").click(function() {
    shiftBoxes('-3608', '-1000', '#box3');
});

I found this example. It looks like you need parens around the values like so:

.animate({backgroundPosition:"(-20px 94px)"}

The Property backgroundPostion accpets values as:

top left bottom right center left

or

x% Y% where the left top is 0% 0% and the right bottom is 100% 100%

or

xpos ypos where you can use any css units as %, pixels, em, etc.

and last

inherit

To use it you would have some like:

.style.backgroundPosition="center bottom";

or

.style.backgroundPosition = "20% 50%";

I hope this helps. Peace.