在jQuery懸停上移動div背景位置

我試圖讓這個工作，但由於某些未知的原因，圖像沒有出現。檢查出JSfiddle我創建了here。（當你將鼠標懸停在圖像上時，圖像應該跳躍，當你懸停時圖像會向下浮動）。在jQuery懸停上移動div背景位置

$(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值動畫。更改背景位置以使用百分比解決了問題。

來源

2013-08-23 Tiwaz89

你不能動畫一個非數字的CSS屬性：

的.animate()方法允許我們創建任何數字 CSS屬性的動畫效果。

來源：

來源

2013-08-23 08:41:45

那麼，如果我用{ '背景位置-X'：'50％'} ...？這會起作用嗎？ – Tiwaz89

你試過嗎？如果沒有，請更新您的問題。你必須具體解釋你在這裏做的是什麼，而不是「它不工作」。 –

試過了，它確實有效。對不起，我認爲代碼非常簡單，自我解釋，並不需要一個完整的探索......但無論如何！，你指出我在正確的方向，非常感謝你。 – Tiwaz89

外表這個插件http://keith-wood.name/backgroundPos.html - 甲jQuery插件，它允許一個背景圖像的位置來進行動畫處理。

i update 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-23 08:49:28

顯示工作演示..deserves upvote .. –

@ user1145009，thanks =） –

@AndreyShatilov非常感謝你，幾乎與代碼I目前正在使用。非常感激。 – Tiwaz89

在jQuery懸停上移動div背景位置

回答

相關問題