jQuery 1.6: backgroundPosition vs backgroundPositionX and FF4 compatibility

Question

In an attempt to upgrade the jQuery plugin 'iCheckbox' (http://stackoverflow.com/questions/6032538/) to work above jQuery 1.4.4 I found out that the use of

 animate({backgroundPosition:'10px 0px'})

needed to be changed to

animate({backgroundPositionX: '10px', backgroundPositionY:  '0px'})

as only properties with one parameter should be used. So far, this makes sense, but wait.. while it's working fine in Safari and Chrome, it's not working in FF4 (all on Mac)..

So i tried this and that and finally found out that if I change it to

animate({backgroundPosition: '10px'})

It works everywhere! But what's going on here? Now that I just give one parameter, it works, but I'm not specifying if it's for X or Y axis (so it defaults to X axis it seems.. but what if I want it to work on Y axis?)

This seems wierd, and my solutions here can't be the correct way of doing it.. so I need some advice:

What's going on?

How should background position be animated using jQuery 1.4 - 1.6 so that it works across browsers?

Answer 1

Firstly, JQuery is unable to animate two values at the same time, thus you saw that inputting two values for backgroundPosition did not work at all. Also note that for px values, the JQuery documentation encourages you to not write the px.

Secondly, backgroundPositionX and backgroundPositionY are non-standard CSS properties only supported in a few browsers, most notably IE and recently Webkit, which is why you will find it does not work in FF or Opera. (See here.)

I have found that mixing JQuery's animate and CSS transitions works to animate a background image on one axis in most browsers. I will quote from my answer to another question ( jQuery.animate background-position):

Use JQuery's .animate() and backgroundPositionX and Y separately for IE (this will work with the latest JQuery). Then in browsers that support CSS transitions (nearly everything besides IE), use .css() instead of .animate() to change the background position and set a CSS transition in your stylesheet.

You'll be covering most browsers with the above, but it may not be AS compatible as just using a plugin. See it at work here: http://jsfiddle.net/lucylou/dVpjh/