Question

我有一个包含四行的表，其行高我想用jQuery制作动画。我使用以下代码来缩小和隐藏行：

$("table tr").animate({ 'line-height': 'hide' }, 5000);

但是，不是开始从当前高度缩小行，而是首先使它们非常巨大，然后开始缩小。按下此小提琴中的“隐藏”按钮可查看其中的操作： http://jsfiddle.net/YzCzd/1/

它发生在Chrome和Firefox中。

这是jQuery中的错误，还是我做错了什么？

Answer 1

回答我自己的问题：问题是jQuery认为line-height是无单位数字属性，因此设置其值不含单位，浏览器将其解释为em。见https://github.com/jquery/api.jquery.com/issues/164

解决方法是强制jQuery将line-height视为普通属性：

$.cssNumber['lineHeight'] = false;

Answer 2

Animate仅适用于值为数字的属性。

'line-height': 'hide'

另外，我认为line-height的值不是hide

<强> Check this

Answer 3

我用列表项修改你的代码。结果如下：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'});});
}

使用jQuery动画行高时的奇怪结果

3 个答案: