jquery.animate background-position doesn't work

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;wi开发者_开发百科dth: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?

---

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

---

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 ;)

---

jQuery doesn't support this on default.

You can use a plug-in like : http://plugins.jquery.com/project/backgroundPosition-Effect

EDIT:

I was wrong, it works:

$(function() {
  $('.moveme').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-100px 10px"});
});

It works if you type in the address bar, but it seems I can't make this work on jsfiddle, strange... xD

---

I have used the background position one here: www.we-new.com (footer), but it's not the effect that I need now. I need the image to move back/forward :-(

Right now I have this:

$(document).ready(function() {
var scrollSpeed=70;
var step=1;
var current=0;
var imageWidth=60;
var headerWidth=screen.width;
var headerStyle = document.getElementById('header-content').style;
var restartPosition=-(imageWidth-headerWidth);

function scrollBg(){
current-=step;
if(current==restartPosition){
    current=0;}

$('#ball1').css("background-position",current+"px 0");}
var init = setInterval(scrollBg,scrollSpeed);
});

http://jsfiddle.net/yFKf9/3/

---

Wrap it inside a

$(document).ready(function() {
     $('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"});
});