$ .animate（）jQuery display：table，不影响未指定的空间维度

Question

在$.animate()上使用jQuery的display:table时，未指定要更改的空间维度将设置动画。

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

$（document）.ready（function（）{

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

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

}）;

Answer 1

使用

设置容器样式

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