jquery - 使用 jquery 的 png 序列上的 CSS 转换在 Mozilla 中不起作用

Question

我正在使用 PNG Sprite 序列创建一个动画，它将在悬停时进行过渡，并在悬停状态结束时动画返回。

http://jsfiddle.net/MLWL5/6/

    $( "div" ).hover(
        function() {
            var elem = $(this);
            var cur = parseInt(elem.css("background-position-x"));
            var steps = (450 + cur) / 50;
            var time = steps * 0.1;
            var trans = "background " + time + "s steps(" + steps + ", end)";
            elem.css("transition", trans);
            elem.css("background-position", "-450px 0px");
        }, 
        function() {
            var elem = $(this);
            var cur = parseInt(elem.css("background-position-x"));
            var steps = - cur / 50;
            var time = steps * 0.1;
            var trans = "background " + time + "s steps(" + steps + ", end)";
            elem.css("transition", trans);
            elem.css("background-position", "0px 0px");
      }
    );

div { width:50px; 
    height:72px;             background:url(http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png) left top;
}

<div></div>

我使用 image sprite 和 jquery 来开发我的，这在 chrome 浏览器上运行良好，但在 Mozilla 上动画效果不佳。

Mozilla 没有执行转换。它正在跳转到最终状态。

Answer 1

据我所知，Firefox 不支持 background-position-x。请改用 background-position，这会起作用。