javascript - $.animate() jQuery显示:table without affecting unspecified spatial dimensions

Question

在 display:table 上使用 jQuery 的 $.animate() 时，未指定要更改的空间尺寸将会产生动画效果。

fiddle

在本例中，指定了 width，但未指定 height，但 height 会跳转。在这种情况下，如何防止 display:table 的 height 在视觉上发生变化？

html

<div style="display:table; height:40px;">
    <div style="display:table-row">
        <div class="cell">
            Short text
        </div>
        <div class="cell cellToAnimate">
            Really long text
        </div>
        <div class="cell cellToAnimate">
            Really, really, really long text
        </div>
    </div>
</div>
<div>
<button type="button" id="cellChanger">Change cells</button>

CSS

.cell{
    display:table-cell;
}

js

$(文档).ready(函数(){

$('.cellToAnimate').hide();

$("#cellChanger").click(function(){
    $('.cellToAnimate').stop(true,false).animate({
        width: 'toggle',
        opacity: 'toggle'
    });
});

});

Answer 1

为容器设置样式

display: block;
height: 40px;
overflow: hidden;