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