jQuery 的 animate() 函數支不支持 backgroundPosition？

很多Animate屬性的列表裡面都指明了可控制CSS backgroundPosition（Dom）屬性，W3school也提供了實例，且可正常運行，包括FF下。但是實際使用中遇到很多問題，按照animate()的語法，在所有瀏覽器下都無效，Dom元素改用backgroundPositionX和backgroundPositionY後，webkit下支持了，但是FF和Opera又不行了。頭疼。。。。然後查了更多資料，普遍說animate()對backgroundPosition支持不好，需要再加一個小插件支持backgroundPosition。但是我又不想僅僅為這個動態效果去再加一個jQuery插件，真是頭疼。

---

剛好前天也遇到這個問題, 需改為

{

"background-position-x":"-100px",

"background-position-y":"-100px"

}

---

支持的，只是部分瀏覽器支持的不是很理想。需要配合插件來支持。推薦插件animateBackground-plugin.js（自己百度名字）

---

今天也碰到這個問題。用插件吧，壓縮的，代碼量也不大

/*加下面這段代碼*/
(function($) {if(!document.defaultView || !document.defaultView.getComputedStyle){var oldCurCSS = $.curCSS;$.curCSS = function(elem, name, force){if(name === "background-position"){name = "backgroundPosition";}if(name !== "backgroundPosition" || !elem.currentStyle || elem.currentStyle[ name ]){return oldCurCSS.apply(this, arguments);}var style = elem.style;if ( !force style style[ name ] ){return style[ name ];}return oldCurCSS(elem, "backgroundPositionX", force) +" "+ oldCurCSS(elem, "backgroundPositionY", force);};}var oldAnim = $.fn.animate;$.fn.animate = function(prop){if("background-position" in prop){prop.backgroundPosition = prop["background-position"];delete prop["background-position"];}if("backgroundPosition" in prop){prop.backgroundPosition = "("+ prop.backgroundPosition;}return oldAnim.apply(this, arguments);};function toArray(strg){strg = strg.replace(/left|top/g,"0px");strg = strg.replace(/right|bottom/g,"100%");strg = strg.replace(/([0-9.]+)(s|)|$)/g,"$1px$2");var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];}$.fx.step. backgroundPosition = function(fx) {if (!fx.bgPosReady) {var start = $.curCSS(fx.elem,"backgroundPosition");if(!start){start = "0px 0px";}start = toArray(start);fx.start = [start[0],start[2]];var end = toArray(fx.end);fx.end = [end[0],end[2]];fx.unit = [end[1],end[3]];fx.bgPosReady = true;}var nowPosX = [];nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];fx.elem.style.backgroundPosition = nowPosX[0]+" "+nowPosX[1];};})(jQuery);
/*end*/


示例如下：

$dom.day.animate({backgroundPosition:"0px -216px"},250);


要不就用原生的JS去寫

---

background屬性也不好好像不支持

---

xx.stop().animate({backgroundPositionX:300px,backgroundPositionY:200px})

---

&

&

&

&

&

&背景位置animate&

&

}),1000

});

$("#down").click(function(){

$("#test").animate({

"background-positionY":0

}),1000

})

})

&

&