javascript - jquery animate 实现背景图动画效果出现的问题？

Question

demo在这里https://jsfiddle.net/pkzt064c/

.d1{
    width:20px;
    height:20px;   background:url(http://www.nuoyidata.com/templets/heibai/images/menu_ico1.png) no-repeat; 
    background-position:0 0;
}
<p class="d1"></p>

$(function(){
   $(".d1").hover(function(){
      $(this).animate({
         "background-position-x":"0",
          "background-position-y":"-29px"
       },500);
   },function(){
       $(this).animate({
         "background-position-x":"0",
         "background-position-y":"0"
       },500);
   });
});

chrome没有问题。
ff下无法移动。
IE7,8没有问题。
IE9以上，鼠标移上有动画效果，移出的话没有动画效果。（很奇怪）

Answer 1

貌似只有webkit和ie支持吧。
解决方法：

1. 把图片写在html里，使用定位然后top控制显示图片显示位置。附效果demo

2. 详见知乎里的同一问题解决办法

Answer 2

火狐不支持这2个属性哦，只支持background-position

Answer 3

在css里面写hover就可以了。
hover的时候background-position改变，同时给个transition就行了。