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

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/

Answer 2

According to: http://www.w3schools.com/css/pr_background-position.asp

"If you only specify one value, the other value will be 50%. You can mix % and positions"