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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With