javascript - ie10 background-position-x 的解决方法

Question

身体有一个背景（一个svg），每次点击背景时我都想把它滑到左边。

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

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

其中 nex 每次增加 600。 chrome 和 ff 更新 background-position-x 就好了。但是在 ie 上，它以一种非常奇怪的方式工作。或者说不能以一种非常奇怪的方式工作。

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

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

Answer 1

好的，background-position-xIE 不支持，这真的很糟糕，因为 jquery 的动画仅适用于单个属性，而不适用于background-position: 5em 10em.

解决方法是创建一个虚拟变量（此处为 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;}
    });
}