如何在嘗試使用jQuery進行動畫時定位html元素？

Question

我爲我的網站做了一個按鈕，這是一個帶背景圖片的div。我使用jQuery爲該按鈕設置動畫，這樣當鼠標懸停按鈕時，它會向右跳20px，當鼠標離開時，它會返回到之前的位置。

問題是，當我在（CTRL + 滾動）放大，整個動畫變得一團糟。按鈕從左到右快速移動，當然不是它應該在的位置。

我用relative位置和像素單元來定位元素。

我應該如何定位？ absolute或relative？像素還是百分比？

Answer 1

這article解釋絕對和相對的，它們有什麼不同？我實踐我第一次wrap我absolute與relative

例如：

HTML

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS

.wrap { 
    float:left; 
    position:relative 
} 
.content { 
    position:absolute; 
    top:10px; 
    left:10px 
} 

Answer 2

最好的辦法是隻使用CSS。它很整潔，而且做得很好。這裏有一個演示

http://jsfiddle.net/kevinPHPkevin/GyVTZ/

img { 
    margin-top:20px; 
} 
img:hover { 
    margin-top:10px; 
}