Question

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 1

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