jquery.animate background-position doesn't work

Question

I'm trying to create a background position change with animation.
but for some reason it's not working.

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div class="moveme" style="height:80px;width:240px;background-image:url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');background-repeat:no-repeat"></div>

<script language="javascript">
    $('.moveme').css("background-position","0px 0px").animate({backgroundPosition:"-100px 10px"});
</script>

ideas?

Answer 1

Animating backgroundPosition does not work as of JQuery 1.5.0. You will have to revert to 1.4.4 if you want it to work. Apparently the fact that it worked in 1.4.4 at all is a coincidence, as "All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)" Since backgroundPosition requires two numeric values, it should not be supported.

See this bug ticket: http://bugs.jquery.com/ticket/8160

And a possible solution: http://bugs.jquery.com/ticket/7755#comment:1

Answer 2

jQuery newer versions than 1.4 is not supporting functions with two attributes. But You can use instead two separate functions - one for x-dimension and one for y one like this:

$('.moveme').css("background-position","0px 0px").animate({'background-position-x': "-100px", 'background-position-y': "10px"});

This doesn't repair js console errors about event.layer (it is caused by browser and making no harm to sites) but it works ;)