CODEWITHSUNDEEP
jqueryjquery-animate
Staffan Estberg
Staffan Estberg

Reputation: 7035

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

Upvotes: 0

Views: 2840

Answers (1)

jAndy
jAndy

Reputation: 236022

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.

Upvotes: 2

Related Questions