动画背景位置不起作用

本文介绍了动画背景位置不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想设置背景位置的动画，但是不起作用.这可以制作动画吗

I want to animate background position but is not working. Is this possible to animate this

<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>

推荐答案

如果选中 jQuery动画页面您可以阅读:

动画

所有动画属性均应设置为单个数字值，除非另有说明.大多数非数字属性不能使用基本的jQuery功能进行动画处理(例如，可以对width，height或left进行动画处理，而不能对background-color进行动画处理，除非使用jQuery.Color()插件).

也就是说，背景位置使用2个值.一种解决方案是拼接值.

That being said, background-position use 2 values. A solution is to splice the value.

这是**

$(this).animate({
  'background-position-x' : '-50px',
  'background-position-y' : '10px'
}, 200);

*我可能已经将您的2个值取反了，我不记得第一个为x，第一个为y.

*I may have inverted your 2 values, i never remember wich one is x and wich one is y.

编辑

由于firefox不支持background-position-x和y，因此这里有修复它的代码:

Since firefox doesnt support background-position-x and y, here a code to fix it :

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

这篇关于动画背景位置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！