將margin-top設置爲與高度相反的最佳方式是什麼？

Question

我目前在這裏工作的個人項目：http://jsfiddle.net/THEtheChad/qusqh/。正如你會注意到的那樣，'link'會跳動，因爲它上面的元素是動畫的。這是因爲jQuery動畫方法不會以相同的時間間隔遍歷高度和margin-top屬性。

我還是比較新鮮的Javascript和jQuery。我想知道是否有人有一個簡單的方法來糾正問題或更有效地工作的代碼片段？

PS隨意在任何自己的項目中使用概念/代碼。如果您有任何建議來優化或提高可用性，請告訴我！

謝謝你們！

Answer 1

一種選擇是在.bubble-box設置高度和一些高大足夠的泡沫<a>，絕對在盒子的底部位置的<a>：

.bubble-box { 
    width: 100px; /* must be same width as bubble */ 
    height: 120px; 
    text-align: center; 
    float: left; 
    position: relative; 
} 
.bubble-box a { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
} 

這樣的<a>的垂直位置將不會取決於.bubble正在做什麼，它不會在動畫過程中晃動。

演示：http://jsfiddle.net/ambiguous/Vw7uQ/