javascript - 将 margin-top 设置为与高度相反的动画的最佳方法是什么？

Question

我目前正在这里进行个人元素:http://jsfiddle.net/THEtheChad/qusqh/ .您会注意到，“链接”随着其上方的元素进行动画处理而跳来跳去。这是因为 jQuery animate 方法不会以相同的间隔步进 height 和 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/