3

行の高さをjQueryでアニメーション化する4行のテーブルがあります。次のコードを使用して、行を縮小して非表示にします。

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

ただし、行を現在の高さから縮小し始めるのではなく、最初に行を非常に大きくしてから縮小し始めます。このフィドルの非表示ボタンを押して、動作を確認してください: http://jsfiddle.net/YzCzd/1/

Chrome と Firefox で発生します。

これは jQuery のバグですか、それとも何か間違っていますか?

4

3 に答える 3

2

私自身の質問に答える：問題は、jQueryが line-height を単位のない数値属性と見なし、ブラウザが解釈する単位なしの値を設定することですem。https://github.com/jquery/api.jquery.com/issues/164を参照してください。

回避策は、jQuery に line-height を通常のプロパティと見なさせることです。

$.cssNumber['lineHeight'] = false;
于 2013-05-06T16:34:58.297 に答える
0

リスト項目を使用してコードを変更します。ここに結果があります：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'});});
}
于 2013-05-05T01:39:02.450 に答える