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

Answer 1

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