$.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'
});
});
});