jQuery animate, doesn't animate

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!开发者_StackOverflow

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/

Well, I couldn't manage to get it to work without a plugin, but the good news is that there is one. You could try http://www.protofunc.com/scripts/jquery/backgroundPosition/

edit.... rats... sorry... just saw that was already posted XD

Try taking the section animation out of the callback. And calling it asynchronously, but with a .delay(500) before it.