我目前正在这里进行个人元素:http://jsfiddle.net/THEtheChad/qusqh/ .您会注意到,“链接”随着其上方的元素进行动画处理而跳来跳去。这是因为 jQuery animate 方法不会以相同的间隔步进 height 和 margin-top 属性。
我对 Javascript 和 jQuery 还很陌生。我想知道是否有人有解决问题的简单方法或更有效的代码片段?
PS 请随意在您自己的任何元素中使用该概念/代码。如果您有任何优化或改进可用性的建议,请告诉我!
谢谢大家!
最佳答案
一个选项是在 .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
是什么正在做,它不会在动画期间摇晃。
关于javascript - 将 margin-top 设置为与高度相反的动画的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7460461/