jQuery Animate导致元素跳转

Question

我有一个简单的jsFiddle，我试图用jQuery创建一个“抽屉”。但是由于一些奇怪的原因，当我为幻灯片制作动画时，我的文字会跳下几个像素。我似乎无法弄清楚是什么导致了它。

我只有两个inline-block元素，我试图隐藏/显示其中一个元素。

<div id="hover-me">
<div class="inline-block" id="show">
    Hello
</div>
<div class="inline-block">
    World
</div>
</div>

$("#hover-me").mouseenter(function() {
    $(this).children(":first").animate({width:'toggle'},650);
});

Answer 1

像这样float:left，http://jsfiddle.net/LfTXr/1/

当您使用animate时，该函数首先从其位置移除元素并应用右/左移动。

当你float元素时，它实际上不在屏幕上，它的浮动，因此动画看起来很流畅。

在此处详细了解position-property，https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

.inline-block {
    display: inline-block;
    max-height:10px; // <
}