Animate background position y in Firefox with Jquery

Question

I'm trying to animate only the y position of a background image.

Code works great in all browsers besides Firefox. I've noticed in prior discussion that FF has a problem with background-position-y but I don't want to include a plugin just for this particular case.

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

As answered in this question: Still having problems with jQuery background animate - works in safari and IE, nothing else! I should be able to use the plain background-position property, but doing so has only broken the animation in other browsers.

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

Perhaps it's just a syntax error I'm missing, but I can't seem to get this working in FF (Latest version)

score 17 · Accepted Answer · edited May 23 '17 at 10:29

17

background-position-x/y is not really part of any CSS spec, its IE specific CSS, added to IE5.5, and later implemented by Webkit.

Opera and Firefox do not accept it.

The best solution is to use the step method, that will let you animate just about anything.

To add a little to Luka's answer, which is somewhat wrong even though the method is correct, the easiest way to use the step method is to animate some arbitrary value, and hook a step to it, something like:

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

The element will have to be wrapped jQuery style to accept jQuery methods, like css(). I've used border-spacing, but any css property that will not affect your site will work, just remember to set an initial value in your CSS for the css property used.

The step method can also be used alone, if you set the fx.start and fx.end values, using it like Luka does with now+=1 is pretty much equal to just using a setInterval instead, but the idea was sound all the same.

FIDDLE

EDIT:

with newer versions of jQuery there are other options as well, see this answer :

JQuery Animate Background Image on Y-axis

edited May 23 '17 at 10:29

Community

1
1

answered May 04 '12 at 13:14

adeneo

312,895
29
395
388

@JMCCreative - actually, you're wrong! In older versions of jQuery. before 1.4.something, you could pass two values in the animation of backgrounds and make it work, at least somewhat. Newer versions of jQuery does not allow this. To set certain values in background position, background-attachment will have to be set to fixed, but you're right in that it should'nt be an issue here. I can also make the background move in Firefox with just a regular animation, but only in the X direction, moving it in the Y direction seems to require using the step method, so Luka has the best answer so far. – adeneo May 04 '12 at 13:47
Okay, I guess you're kind of right. On this one: http://jsfiddle.net/JMC_Creative/nAXdd/ I've set the version of jquery to 1.4 and it _does_ accept both values. Both it only animates the X, while it simply jumps to the Y coordinates. – JakeParis May 04 '12 at 13:51
Yes, there is some weirdness going on. – adeneo May 04 '12 at 13:58
Awesome, this looks like it'll do it. Will mark it answered once I get it implemented. Thanks to both of you for hashing this out. – Gregg B May 04 '12 at 14:44
That arbitrary value was the real key. How random. Thanks again. – Gregg B May 04 '12 at 15:06
Good job, my code sample wasn't working. I'll edit it. Thanks. – Luka Ramishvili May 04 '12 at 15:22
And actually your answer is more complete and thorough, and also includes the fact that you can use duration to avoid specifying final step of animation in the first argument. – Luka Ramishvili May 04 '12 at 15:25

score 3 · Answer 2 · answered Mar 15 '13 at 22:21

The firefox don't understands the background-position with jquery animate, but firefox accepts css3 animate.

Code:

  if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }

JakeParis · Answer 3 · 2012-05-04T13:46:03.573

2

It looks like jquery's animate will only take one background property, not both. You can use either percentages or pixels, both are okay. But from what I can tell, there's not a way to specify only x or y coordinates. Hopefully someone can prove me wrong on that, but that's what this fiddle seems to show:

http://jsfiddle.net/JMC_Creative/dPjSz/

Also, no matter what background-position values you put into css, the jquery animation always seems to start from "0 50%". Hmmm...

edited May 04 '12 at 13:46

answered May 04 '12 at 13:33

JakeParis

11,056
3
42
65

Right, you've stumbled on the same weirdness I've been finding. I can animate `background-position-y` only if I don't care about firefox, but when I include an x value it ignores the y value. Thoroughly baffled. – Gregg B May 04 '12 at 13:52
Just fyi, background-position-y isn't a *real* css rule, that's just an IE specific doodad. – JakeParis May 04 '12 at 13:53
But it's supported in Webkit, so you're right, but it SHOULD be supported beause it's great, haha – Gregg B May 04 '12 at 13:58

Luka Ramishvili · Answer 4 · 2012-05-04T15:25:59.637

1

use step parameter:

  $("item").animate({
           opacity:1,
       }, 
      step: function(now, fx){ 
          $(fx.elem).css("background-position","0px "+now+"px");
          now+=1;
      }
});

From the jQuery documentation: http://api.jquery.com/animate/#step

edited May 04 '12 at 15:25

answered May 04 '12 at 13:23

Luka Ramishvili

889
1
11
20

Going to give this a try. Will report back when I get a second. – Gregg B May 04 '12 at 13:54
It doesn't seem to be working: http://jsfiddle.net/JMC_Creative/nAXdd/2/ ... Maybe I implemented it wrong. – JakeParis May 04 '12 at 13:55

score 0 · Answer 5 · answered May 16 '13 at 05:46

$initElement.addClass(initClass).animate(
            {height:[0, 'easeInCirc'], top:  ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']}, 
            {step: function(now, fx) {
                $initElement.css({"background-position" : "0px -"+now+"px"}
                )},
            },
            {duration: time4design, queue:false},
            function(){ $initElement.removeClass(initClass)});

Jim Hopper · Answer 6 · 2021-10-10T10:29:30.500

0

var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);

edited Oct 10 '21 at 10:29

answered Aug 04 '15 at 19:53

Jim Hopper

13
1
4

3

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 10 '21 at 11:14

Sujith Kumar KS · Answer 7 · 2012-05-04T13:25:17.133

-1

background-position animation is only work with jQuery 1.5.2 or below

edited May 04 '12 at 13:25

answered May 04 '12 at 13:19

Sujith Kumar KS

1,043
12
23

I Experienced the problem on this http://jsfiddle.net/69hZY/4/ and http://jsfiddle.net/69hZY/45/ The Second one is using jquery 1.7.2 – Sujith Kumar KS May 05 '12 at 04:40

score -1 · Answer 8 · answered May 04 '12 at 14:15

-1

in jQuery you can animate background-position-x or y like this:

$(selector).animate({ 
                       backgroundPositionY: amountToAnimate 
                    }, duration);

The idea being that in javascript the - character is an reserved operator outside of strings. jQuery uses camelcase to work around this.

answered May 04 '12 at 14:15

Codrin Eugeniu

1,365
8
14

First off, you can use - in object keys. var x = {"some-stuff": "weee"}; x["some-stuff"] // weee Secondly, the entire question exists because doing what your answer suggests, doesn't work. – Kabir Sarin Feb 24 '14 at 01:03

Animate background position y in Firefox with Jquery

8 Answers8

Linked