Weird result when animating line

I have a table with four rows, whose line-height I want to animate with jQuery. I use the following code to shrink and hide the rows:

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

But instead of starting to shrink the rows from their current height, it first makes them really huge, and then starts shrinking. Press the Hide button in this fiddle to see it in action: http://jsfiddle.net/YzCzd/1/

It happens in Chrome and Firefox.

Is this a bug in jQuery, or am I doing something wrong?

---

Answering my own question: the problem is that jQuery considers line-height to be a unitless number attribute, and thus sets its value without unit, which the browser interprets as em . See https://github.com/jquery/api.jquery.com/issues/164

A workaround is to force jQuery to consider line-height as a normal property:

$.cssNumber['lineHeight'] = false;

---

Animate will only work with attributes whose values can be numbers .

'line-height': 'hide'

Also I don't think line-height has the value called hide

Check this

---

I modify your code with a list item. here is the result: 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'});});
}

链接地址: http://www.djcxy.com/p/39556.html

上一篇: 如何让div填充整个表格单元格？

下一篇: 动画线时出现奇怪的结果