CSS过渡在Mozilla

Question

不工作我创建使用PNG精灵序列，这将对悬停过渡动画，动画和回悬停状态结束时。

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>

我已经使用图像精灵和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>

希望这有助于