jquery - 使用 jQuery 为 line-height 设置动画时的奇怪结果

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 仅适用于其值可以是numbers的属性。

'line-height': 'hide'

另外我不认为line-height有所谓的价值hide

检查这个

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