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

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;
}
<div class="d1"></div>

$(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以上，鼠标移上有动画效果，移出的话没有动画效果。（很奇怪）