JQuery animation, not animation

Question

I use the animate () function to change the background position of the button on hover, the problem is that instead of “animating” it just waits for the duration (500) and clicks in the new background position - without a smooth transition.

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

What I use JS. Any ideas why this doesn't make a smooth transition? It acts like a timeout. I have both jQuery and UI.

Thanks!

Answer 1

You cannot revive the background position. Animation properties expect a single value, such as opacity:1 , left:'50px' , etc.

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

Answer 2

Well, I was not able to get it to work without the plugin, but the good news is that it is. You can try http://www.protofunc.com/scripts/jquery/backgroundPosition/

edit .... rats ... sorry ... just saw that XD had already been sent

Answer 3

Try to extract the section animation from the callback. And call it asynchronously, but with .delay (500) in front of it.