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/

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

1 个答案: