Geek asks and answers

JQuery Animation Background Position Cross Browsers

I can't seem to get this to work:

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

I tried this, but not on FoxFox:

$('#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 am using JQuery 1.8. Any ideas?

+5
source share
4 answers

So, if you just want to animate a position x, you're in luck, as animation yfor background-positiondoes not work in jQuery. Therefore, for xuse:

'background-position': '10%'

but if you want to increase the position to animate a series of frames, you need to increase this way:

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

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

+10
source

, , Firefox. . , .

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


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

Firefox.

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

. .

+3

x y

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

Why not try the Keith Wood jQuery Background Position Animation plugin ? I ended up using it a few years ago when I came to the project late and needed a solution for background animation, and I didn’t have time to figure out why my code failed in the cross browser (fast and dirty - hey, big !), and I will be honest, this is one of the few plugins that I keep returning to.

There are examples on the linked page, so I won’t repeat them, but the hats go to Mr. Wood, as his plug-in never let me down.

+1
source

More articles:


All Articles