在jQuery悬停上移动div背景位置

Question

我正试着让它发挥作用，但由于某种未知的原因，图像没有移动..查看我创建的JSfiddle 这里。(当你悬停在上面的时候，图像应该是跳跃的，当你悬停的时候，图像应该会向下飘浮)。

​

$(document).ready(function() {
  $('#hover-image').hover(

    function() {
      // Over
      $(this).animate({
        'background-position': 'center top'
      }, 5000);
    },
    function() {
      // Out
      $(this).animate({
        'background-position': 'center center'
      }, 5000);
    }
  );
});

#hover-image {
  width: 300px;
  height: 300px;
  background: url(http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png);
  background-repeat: no-repeat;
  background-position: center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="hover-image"></div>

​

编辑:我现在发现你不能在非数值的css值上动画。改变背景位置以使用百分比解决了这个问题。

Answer 1

不能动画非数字CSS属性：

.animate()方法允许我们在任何数值 CSS属性上创建动画效果。 来源：http://api.jquery.com/animate/

Answer 2

看看这个插件http://keith-wood.name/backgroundPos.html -一个允许背景图像的位置被动画的jQuery插件。

我更新了jsfiddle

$(document).ready(function(){
    $('#hover-image').hover(

        function(){
            // Over
            $(this).animate({backgroundPosition: '50% 100%'},500);              
        },
        function(){
            // Out
            $(this).animate({backgroundPosition: '50% 50%'},500);             
        }
    );
});