Question

I’m using the animate() function to change the background position of a button on hover, the problem is that instead of ‘animating’ it just waits the duration (500) and flicks to the new background position – without a smooth transition.

$('.confirm').hover(function() {
    $(this).animate({backgroundPosition: '0, -40px'});
}, function() {
    $(this).animate({backgroundPosition: '0, 0'});
});

That’s the JS I’m using. Any ideas why it’s not doing a smooth transition? It’s acting like a timeout. I have both jQuery and UI defined.

Thanks!

Answer 1

You can’t natively animate a background position. Animation properties expect a single value, like opacity:1, left:'50px', etc.

This plugin should add the functionality you need:
http://www.protofunc.com/scripts/jquery/backgroundPosition/