jpganz18 jpganz18 - 1 year ago 149
CSS Question

How do you animate a background position with jQuery?

I have been trying to animate a background position move from a div. The div has a background and has something like this:

<div class="uppermenu" style="background-position: 0px -80px;"></div>

So, it works fine, and when I am making a mouseenter I want to change the background position animating it making it be like background-position:0px 0px, but it just doesn't work... I can change the colors and all, but I can't move the background. Is there a way to do it?

I've tried like this:

jQuery(this).children(".uppermenu").animate({"background-position": "0 85px"}, "slow");

And also like this:

'background-position-y': '45px',
'background-position-x': '0px'
}, 100, 'linear');

None of them changed my position. What is wrong?

Answer Source

The syntax for animating background position is:

.animate({backgroundPosition:"(-20px 94px)"});

You can also use a plugin for this at

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download