ie10 background-position-x的解决方法

Question

身体有背景（svg），每次单击背景时我都想将其向左滑动。

在我使用的点击处理程序中

$('body').animate({'backgroundPositionX': nex+"em"},1500);

nex每次增加600。chrome和ff更新background-position-x就好了。 但是，也就是说，它以一种非常奇怪的方式工作。 或更确切地说，它不是以一种非常奇怪的方式工作。

当我按下f12时，在ie10中，背景位置x始终在样式选项卡上保持不变，但在“计算”选项卡上改变。 但是，即使您可以看到计算出的值发生了变化，但是当您读取background-position-x时却什么也没得到，因此jquery会从ZERO动画到新位置，而不是从当前位置。

我正在尝试找到解决方法。

Answer 1

好的，在IE中不支持background-position-x ，这实在太可惜了，因为jquery的动画只对单个属性起作用，而对background-position: 5em 10em这样的属性background-position: 5em 10em 。

解决方法是创建一个虚拟var（此处为x）并对其进行动画处理，并每次构建字符串，如下所示：

backposx=0;
function next_click() 
{
    $({x: 0}).animate({x: 600}, {
        duration: 1500,
        step: function(){
            $("#background").css("background-position",(backposx-~~this.x) + "em 0%");},
        complete:function(){backposx-=600;}
    });
}