使用 GreenSock 的 backgroundPosition 讓動畫在 FireFox 也能動

最近常常在使用  jQuery 的 Animation 發現，若想要對某個元素產生 animation 時，而且是更改其 css 的 background-position-x/y，在 Firefox 並不管用。雖然網路上有人也提了一樣的問題，不過我試了一樣是沒有成功。

這則 stackoverflow 的答案得到重點是

background-position-x/y is not really part of any CSS spec

以及

Opera and Firefox do not accept it

問題
因此後來為了不想繞路，後來我選擇了使用 GreenSock，去做任何某個 site 需要的 animation，而且 GreenSock 的寫法更直覺，效果更多，不料，一樣問題也發生了:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});

解決
一樣的問題發生在 background-position 在 FireFox 不管用，後來在 forums 得到了解法(FireFox animating background position)，
你可以改用 backgroundPosition，記住，沒有'-'，而且 P 大寫，就可以解決在 FireFox 的問題:

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});

最後的寫法變成這樣 (我額外加上了 FireFox 的判斷):

var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
if( $.browser.mozilla ){
        TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});
}else{
        TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});
}