jQuery animate: background position not animating, showing image instantly

There's something wrong with this code, or the way I've laid out my menu because animating the background position won't work. In my CSS I've simply assigned every a in the div.nav to have a background with 0 0 positioning as well as display: block and a specific width + height. What happens is image switch is done instantly instead of scrolling in (-95px on background positioning). What am I missing?

$('div.nav a').mouseover(function () {
    if (!$(this).is('.active')) {
        $(this).stop().animate({
            backgroundPosition: '0 0'
        }, {
            duration: 500
        });
    }
});

$('div.nav a').mouseout(function () {
    if (!$(this).is('.active')) {
        $(this).stop().animat开发者_如何学编程e({
            backgroundPosition: '0 0'
        }, {
            duration: 500
        });
    }
});

jQuery, natively, can't handle that properly because it needs two values to modify.

http://snook.ca/archives/javascript/jquery-bg-image-animations/

You should replace backgroundPosition: '0 0' with backgroundPosition: '0px 0px'

That should work, but it should also just animate the x-axis.