奇怪的結果時，與jQuery動畫線高度

我有一個表有四行，其行高我想與jQuery動畫。我使用下面的代碼，以縮小和隱藏的行：奇怪的結果時，與jQuery動畫線高度

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

，而不是開始從他們目前的高度收縮行，但是，它首先使他們真正巨大的，然後開始萎縮。按下該小提琴中的隱藏按鈕即可看到它的動作： http://jsfiddle.net/YzCzd/1/

它發生在Chrome和Firefox中。

這是jQuery中的錯誤，還是我做錯了什麼？

來源

2013-05-05 gpothier

也許監守'hide'是不是一個有效的CSS屬性，因此它不知道如何動態顯示。 http://www.w3schools.com/cssref/pr_dim_line-height.asp – 2013-05-05 00:45:57

它確實不是一個有效的CSS值，但jQuery理解它（以及「show」和「toggle」），請參閱http：// api .jquery.com/animate/ – gpothier 2013-05-05 01:00:45

經過了一段時間，我發現問題的原因：jQuery認爲行高是一個數字屬性（不管它是什麼意思，但是例如寬度和高度都不是數字屬性），因此在設置屬性值時不指定單位。它看起來像一個無單位值的行高被視爲'em'單元中的值... – gpothier 2013-05-05 01:04:20

回答我自己的問題：問題在於jQuery認爲行高是一個無單位數字屬性，因此設置它的值不帶單位，瀏覽器將其解釋爲em。見https://github.com/jquery/api.jquery.com/issues/164

一種解決方法是強制jQuery來考慮行高爲正常屬性：

$.cssNumber['lineHeight'] = false;

來源

2013-05-06 16:34:58 gpothier

Animate只能使用值爲的數字。

'line-height': 'hide'

此外，我不認爲line-height有一個名爲hide

Check this

來源

2013-05-05 00:50:08

實際上'hide'，'show'和'toggle'是jQuery.animate的有效值，請參閱http://api.jquery.com/animate/ – gpothier 2013-05-05 00:58:25

它們適用於'jQuery.animate'，而不是'line-height'css屬性。 – Christian 2013-05-05 01:13:56

我有一個列表項修改代碼的價值。這裏是結果：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>

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-05 01:39:02 Romain

您正在使用'height'屬性，它確實有效。我的問題是'line-height'屬性（因爲我需要使用表）。 – gpothier 2013-05-05 03:03:35

奇怪的結果時，與jQuery動畫線高度

回答

相關問題