Question

我想为背景位置制作动画但不起作用。这可能是动画这个

<head>
    <style>
        .test{ background:#F00}
    </style>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(){
                $(this).animate({backgroundPosition:'-50px 10px'}, 200);
            });
        });
    </script>
</head>

<body>
    <a href="javascript:void(0)">click</a>
    <div>check....</div>
</body>

Answer 1

如果您选中jQuery animate page，则可以阅读：

<强>动画

除非如下所述，否则所有动画属性都应设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用了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); } }); });

Answer 2

我忘记了我遇到过这个问题的地方，但是这里有一点点哈巴狗，这很巧妙：

(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);
    });
});

Answer 3

Working jsFiddle Demo

我认为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;
}

只需使用background-position方法更改jQuery中的.css()：

$(function(){
    $('a').click(function(){
        $(this).css('background-position', '250px 250px');
    });
});

动画背景位置不起作用

3 个答案: