When utilizing jQuery's $.animate() on an element styled with display:table, any spatial dimensions that are not explicitly specified to change will animate.
In the scenario presented, the width is defined for animation, but the height is not. This leads to erratic behavior in the height of the table display. How can the visual changes in a display:table's height be prevented?
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;
}
JavaScript
$(document).ready(function () {
$('.cellToAnimate').hide();
$("#cellChanger").click(function(){
$('.cellToAnimate').stop(true,false).animate({
width: 'toggle',
opacity: 'toggle'
});
});
});