动画背景位置不起作用
我想动画背景位置但不起作用。 这可能是动画这个
.test{ background:#F00} $(function(){ $('a').click(function(){ $(this).animate({backgroundPosition:'-50px 10px'}, 200); }); }); click check.... 如果你检查jQuery动画页面，你可以读到：
活跃
除非如下所述，否则应将所有动画属性设置为单个数值。 大多数非数字属性无法使用基本jQueryfunction进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。
话虽这么说，背景位置使用2个值。 解决方案是拼接值。
这里’如何*：
$(this).animate({ 'background-position-x' : '-50px', 'background-position-y' : '10px' }, 200);
*我可能已经颠倒了你的2个值，我永远不会记得一个是x而一个是y 。
编辑
由于firefox不支持background-position-x和y ，这里有一个代码来修复它：
var pos = {x : '', y : ''}; $('a').click(function(){ var that = $(this); that.animate({ 'background-position-x' : '-50px', 'background-position-y' : '10px' },{ duration : 200, step : function(a,b){ if(b.prop == "backgroundPositionX"){ pos.x = a + b.unit }else if(b.prop == "backgroundPositionY"){ pos.y = a + b.unit } }, progress : function(){ that.css('background-position', pos.x + ' ' + pos.y); } }); });
我忘记了我遇到过这个问题的地方，但是这里有一个小哈巴狗，这很巧妙：
(function($){$.extend($.fx.step,{backgroundPosition:function(c){if(c.state===0&&typeof c.end=='string'){var d=$.curCSS(c.elem,'backgroundPosition');d=toArray(d);c.start=[d[0],d[2]];var e=toArray(c.end);c.end=[e[0],e[2]];c.unit=[e[1],e[3]]}var f=[];f[0]=((c.end[0]-c.start[0])*c.pos)+c.start[0]+c.unit[0];f[1]=((c.end[1]-c.start[1])*c.pos)+c.start[1]+c.unit[1];c.elem.style.backgroundPosition=f[0]+' '+f[1];function toArray(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var b=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(b[1],10),b[2],parseFloat(b[3],10),b[4]]}}})})(jQuery);
并在使用中：
$(function(){ $('a').click(function(){ $(this).animate({backgroundPosition: "(-50px 10px)"}, 200); }); });
工作jsFiddle演示
我认为jQuery无法为background-position设置动画。 一种解决方案是在CSS中使用转换：
a { -webkit-transition: background-position 0.6s; -moz-transition: background-position 0.6s; -ms-transition: background-position 0.6s; -o-transition: background-position 0.6s; transition: background-position 0.6s; }
只需使用.css()方法更改jQuery中的background-position ：
$(function(){ $('a').click(function(){ $(this).css('background-position', '250px 250px'); }); });