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

回答1:

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

回答2:

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

回答3:

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

回答4:

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/

回答5:

Wrap it inside a

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

来源：https://stackoverflow.com/questions/5078262/jquery-animate-background-position-doesnt-work

标签

jquery

jquery-animate