CODEWITHSUNDEEP
javascriptjqueryhtml
ImadBakir
ImadBakir

Reputation: 553

JQuery Animate Background position Cross browsers

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?

Upvotes: 5

Views: 28319

Answers (4)

Ric
Ric

Reputation: 650

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.

Upvotes: 1

Saurabh Kumar
Saurabh Kumar

Reputation: 135

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

Upvotes: 3

Raad
Raad

Reputation: 4648

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.

Upvotes: 10

Faizul Hasan
Faizul Hasan

Reputation: 623

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.

Upvotes: 3

Related Questions