动画线时出现奇怪的结果
我有一个有四行的表格，其行高我想用jQuery制作。 我使用下面的代码来收缩和隐藏行：
$("table tr").animate({ 'line-height': 'hide' }, 5000);
但不是开始将行从当前高度缩小，它首先使它们变得非常庞大，然后开始缩小。 按下该小提琴中的隐藏按钮即可看到它的作用：http://jsfiddle.net/YzCzd/1/
它发生在Chrome和Firefox中。
这是jQuery中的错误，还是我做错了什么？
回答我自己的问题：问题在于jQuery认为line-height是无单位数字的属性，因此它设置了它的值而没有单位，浏览器将其解释为em 。 请参阅https://github.com/jquery/api.jquery.com/issues/164
解决方法是强制jQuery将行高视为正常属性：
$.cssNumber['lineHeight'] = false;
Animate仅适用于其值可能为数字的属性。
'line-height': 'hide'
另外我不认为line-height有一个叫hide的值
检查这个
我用一个列表项修改你的代码。 这里是结果：http://jsfiddle.net/CtGmH/1/
CSS
#table {
width: 100%;
}
#table ul {
height: 30px;
background: green;
list-style-type: none;
padding: 0;
margin: 10px;
}
#table ul.odd {
background: red;
}
table li{position: relative; }
HTML
<div id="table">
<ul class="odd"><li>A</li></ul>
<ul><li>B</li></ul>
<ul class="odd"><li>C</li></ul>
<ul><li>E</li></ul>
</div>
<button onclick="window.show()">Show</button>
<button onclick="window.hide()">Hide</button>
JS
window.show = function() {
$("ul").animate({ 'height': 30 }, 5000);
$("ul li").css({'visibility':'visible'}).animate({ 'height': 30 }, 5000);
}
window.hide = function() {
$("ul").animate({ 'height': 0 }, 5000);
$("ul li").animate({ 'height': 0 }, 5000, function(){$("ul li").css({'visibility':'hidden'});});
}