javascript - $.animate() jQuery display:table 不影响未指定的空间维度

Question

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

小提琴

在这种情况下，width已指定，但未指定，但height会height跳转。在这种情况下，如何防止 adisplay: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;