带有内联块的奇怪的生长动画

Question

我在一个 div 中有一些 div 作为内联块。现在，当我让它们成长时，其余的会下降，然后上升到它们原来的位置。我保持了所有的边距、高度、宽度和所有 - 因为，最终位置是我想要的。只是动画困扰着我。有什么帮助吗？

这是一个关于 jsfiddle 的例子。我的原始代码也是如此。

http://jsfiddle.net/7Wq6v/

$("#main > div").hover(function(){
    $(this).animate({height: "4em", width: "4em", margin: "1em", lineHeight: "4em"},200);
}, function() {
    $(this).animate({height: "2em", width: "2em", margin: "2em", lineHeight: "2em"},200);
});

PS : 仅当内联块中有文本或其他内容时才会发生这种情况，如果它是空的，则不会显示奇怪的动画。

Answer 1

将vertical-align: middle; 添加到您的 CSS。

#main > div {
    display : inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/mblase75/8wBhT/