jpganz18 jpganz18 - 1 month ago 6
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:

jQuery(this).children(".uppermenu").animate({
'background-position-y': '45px',
'background-position-x': '0px'
}, 100, 'linear');


None of them changed my position. What is wrong?

Answer

The syntax for animating background position is:

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

You can also use a plugin for this at http://archive.plugins.jquery.com/project/backgroundPosition-Effect

Comments