Question

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().animate({
            backgroundPosition: '0 0'
        }, {
            duration: 500
        });
    }
});

Answer 1

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.