0

私はこれを機能させようとしていますが、何らかの理由で画像が動いていません..ここで作成した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 値ではアニメーション化できないことがわかりました。パーセンテージを使用するように背景の位置を変更すると、問題が解決しました。

4

2 に答える 2

3

このプラグインを見てください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);             
        }
    );
});
于 2013-08-23T08:49:28.013 に答える