Question

我正在使用PNG精灵序列创建一个动画，它将在悬停时进行转换，并在悬停状态结束时动画回来。

    $( "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>

我使用了图像精灵和jquery来开发我的，这在Chrome浏览器上工作正常，但在Mozilla上没有很好的动画。

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

Answer 1

据我所知，Firefox并不支持background-position-x。使用background-position代替，这将有效。

Answer 2

您可以按空格获取background-position和split()以获取其x值。然后像在函数中一样计算剩下的部分。

更新jsFiddle link

另外，代码是

    $( "div" ).hover(
        function() {
            var elem = $(this);
            var cur = parseInt(elem.css("background-position").split(" ")[0]);
            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").split(" ")[0]);
            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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

希望这有帮助

使用jquery在Mozilla中工作的png序列上的CSS转换

2 个答案: