5

it seems am not able to get this to work:

$("#animation").animate({backgroundPosition:"-100px 10px"});

I tried this it works, But not on FFox:

$('#animation').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

div:

<div id="animation" style="border: 0px solid rgb(153, 153, 153); margin: auto; width:550%;height: 100%;background-size:100% 100%; overflow:hidden; padding: 0px; background-image: url(images/pano.png); background-attachment: scroll; box-shadow: rgb(0, 0, 0) 0px 0px 40px inset; background-position: 180px 0px; background-repeat: no-repeat;display: none;"></div>

JsFiddle: http://jsfiddle.net/sorfect/34psJ/1/ I'm using JQuery 1.8. Any Ideas?

ImadBakir
  • 553
  • 1
  • 7
  • 26
  • I don't think it likes the percentage. Try changing it to px just to see if something happens. – qwerty Mar 05 '13 at 10:30
  • I did, still doesn't work with firefox. – ImadBakir Mar 05 '13 at 10:33
  • Does it work correctly in chrome? Do you have a live demo available? Or maybe a codepen/jsfiddle? *Edit:* See this: http://codepen.io/vobpler/pen/KyHnf – qwerty Mar 05 '13 at 10:34
  • JsFeddle is now in the edit. – ImadBakir Mar 05 '13 at 10:47
  • @qwerty your codepen works on Chrome but not on FF, also mine, what I want is to get it work on at least Chrome and FF. – ImadBakir Mar 05 '13 at 10:49
  • If all you want to do is run the animation of the horse galloping, why are you trying to change the value of `background-position-y`? – Raad Mar 05 '13 at 11:26
  • Actually not, this is only an example I made now for the working and not working code, I will use the same way to work with something else. and in all cases I don't need the `background-position-y` – ImadBakir Mar 05 '13 at 11:29
  • If you don't really care about ie9- and want good (better) performance than Javascript (as well as cleaner code) i strongly suggest using CSS3 animations. Maybe a IE polyfill for that if you need support. – qwerty Mar 05 '13 at 11:33

4 Answers4

10

Ok, so if you just want to animate the x position, you're lucky as animating y for background-position does not work in jQuery. So for x use:

'background-position': '10%'

but if you want to increment the position in order to animate a series of frames, you need to increment thus:

'background-position': '+=10%'

See my jsFiddle for a working example with stop/go controls.

Raad
  • 4,540
  • 2
  • 24
  • 41
3

I think this would help you and this too for why it is not working in Firefox. I was working around with your code. Following code block is behaving in the same way of your code.

This behaving same way

$(document).ready(function() {
  $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});

To

$('#animation').animate({
 'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

And this code block is working in Firefox too.

 $(document).ready(function() {
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
 });

For further reference just check the above given links. Those will help you.

Community
  • 1
  • 1
Faizul Hasan
  • 625
  • 1
  • 7
  • 17
3

you can use this code to animate background position along both x and y direction and it is less cpu expensive

var x=0;
window.setInterval(function(){
$('#animation').css('background-position',x+'px '+x+'px');
x=(x-4)%1100;//1100 is width of background image in px
},70);
Saurabh Kumar
  • 125
  • 11
1

Why not try Keith Wood's jQuery Background Position Animation plugin? I ended up using it some years ago when I came to a project late and needed a solution for background animating and didn't have the time to investigate why my code was failing cross browser (quick and dirty - hey, there was a deadline looming large!) and I'll be honest it's one of the few plugins I keep on coming back to.

There are examples on the linked page, so I won't bother repeating them, but hats off to Mr Wood as his plugin has never failed me.

Ric
  • 640
  • 5
  • 10