7

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?

ran levi
  • 205
  • 2
  • 4
  • 7

5 Answers5

7

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

dasl
  • 761
  • 8
  • 10
4

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

lukaszkups
  • 5,790
  • 9
  • 47
  • 85
3

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

XCS
  • 27,244
  • 26
  • 101
  • 151
  • 1
    What's strange is, I can make this work on SO's own home page: javascript:jQuery("#hlogo a").animate({"backgroundPosition":"50px 50px"}); – Luke Dennis Feb 22 '11 at 12:51
  • I tried in jsfiddle and it didn't work for me, can you post a jsfiddle example? – XCS Feb 22 '11 at 12:52
  • 1
    small point; this won't work in FF 13 using jQuery 1.7.2 unless you remove the 'px' from the values. Also you don't need 'backgroundPosition' in quotes. Old answer I know but this helped me. – totallyNotLizards Jul 17 '12 at 15:25
1

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/

inTOWN
  • 1,000
  • 1
  • 7
  • 19
0

Wrap it inside a 

$(document).ready(function() {
     $('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"});
});
Starx
  • 77,474
  • 47
  • 185
  • 261