在jQuery中，如何在display none和display table（或其等效視圖）之間創建動畫？

我一直在嘗試學習一些關於jQuery的.animate()函數，並且我已經得到了一些動畫，但是我還沒有能夠以我想要的方式爲我的表設置動畫。在jQuery中，如何在display none和display table（或其等效視圖）之間創建動畫？

這裏的表HTML：

<div class="topSectionContainer"> 
    <div id="dropDownArrow">&#9658;</div><span class="editLabelTitle">Page Settings</span> 
    <table class="topSectionTable"> 
     <tr> 
      <td class="pageSettingsContainer"></td> 
      <td class="fileBoxContainer">@Html.Raw(ContentGenerator.getFileBox("Tourism"))</td> 
     </tr> 
    </table> 
</div>

我想獲得以下功能：

的table.topSectionTable開始了，就好像它有display: none分配。
當div#dropDownArrow被點擊時，它應該（當動畫時）出現表格正在高度增長（高度屬性是否實際調整或不），並揭示表格內容隨着展開。
一旦再次點擊div#dropDownArrow，它應該反轉動畫，從而隱藏表格並縮小其高度（或其外觀）。

我已經使用了一些簡單的代碼，這不具有動畫（jQuery的）：

$("#dropDownArrow").toggle(function() { 
    $(".topSectionTable").css("display", "table"); 
    $("#dropDownArrow").html("&#9660;"); 
}, 
function() { 
    $(".topSectionTable").css("display", "none"); 
    $("#dropDownArrow").html("&#9658;"); 
});

事情我已經嘗試：

使用jQuery的.animate()與顯示器屬性。 我不確定在這裏失敗的原因，因爲顯示屬性中的實際更改沒有顯示，但我猜想對display屬性的更改不支持jQuery的.animate()。
我也嘗試設置table.topSectionTable的CSS規則以反映overflow: hidden;和height: 0px;，然後僅動畫height屬性。 在這裏，高度動畫是成功的，然而，td.fileBoxContainer內容顯示的高度是否是0（即使高度膨脹，在div#dropDownArrow元素的clickings合同。

我我知道有一種方法，而且我想在jQuery中這樣做，而不僅僅是CSS3，因爲如果可能的話，我還想在IE8中保留這個功能，並且我知道CSS3沒有這個機會。

更新 - 試圖用高度爲0和溢流隱藏，PLUS JQUERY ANIMATE

jQuery代碼：

$("#dropDownArrow").toggle(function() { 
    $(".topSectionTable").animate({ 
     height: 100}, 1000); 
    $("#dropDownArrow").html("&#9660;"); 
}, 
function() { 
    $(".topSectionTable").animate({ 
     height: 0}, 1000); 
    $("#dropDownArrow").html("&#9658;"); 
});

CSS：

table.topSectionTable 
{ 
    height: 0; 
    overflow: hidden; 
} 

td.pageSettingsContainer 
{ 

} 

td.fileBoxContainer 
{ 

}

而HTML與a相同波夫

我的C＃getFileBox方法：

public static string getFileBox (string location) 
{ 
    string content = ""; 
    string[] files = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/CMS Files/" + location + "/")); 

    foreach (var file in files) 
    { 
     content += Path.GetFileName(file); 
     content += "<br/>"; 
    } 

    return content; 
}

來源

2013-09-30 VoidKing

[顯示上的轉換：屬性]的可能重複（http://stackoverflow.com/questions/3331353/transi tions-on-the-display-property） – cimmanon

無論你是否被'@ Html.Raw（ContentGenerator.getFileBox（「Tourism」））吐出'都不會改變風格嗎？ '高度：0;溢出：隱藏;'應該工作。 – Snuffleupagus

@Snuffleupagus是的，它表現得好像這應該起作用，然而，沒有* style *變化被c＃方法吐出。所有它（現在）是由標準'
'元素分隔的某個目錄中的文件名列表。即使如此，它不會隱藏起來（也不會隱藏）。 – VoidKing

恩德卯起來搞清楚這一個：

好了，而這個頁面有建議的重複：

Transitions on the display: property

真正的重複（考慮手頭的問題，尤其是回答）應該是這樣的：

overflow:hidden not working when using tables

簡短的回答我的問題是這樣的：

「溢出僅適用於塊級元素。表元素不是塊元素。」

因此我的解決辦法是簡單地總結我的表在另一個DIV和應用overflow: hidden;和高度，然後用jQuery的.animate()而不是表的目標吧。

至於爲什麼slideUp()和slideDown()沒有工作，我只能推測，當jQuery的實現這些功能，它使用了一些（如果不是全部），顯然打破了非塊級元素相同的功能。

來源

2013-09-30 19:50:31 VoidKing

嘗試slideUp()和slideDown()，實例here和文檔here

來源

2013-09-30 15:25:04 Yoggi

是作爲sayd起來使用：

$("#dropDownArrow").toggle(function() { 
    $(".topSectionTable").slideDown(); 
    $("#dropDownArrow").html("&#9660;"); 
}, 
function() { 
    $(".topSectionTable").slideUp(); 
    $("#dropDownArrow").html("&#9658;"); 
});

來源

2013-09-30 15:29:14 Ciccio

好吧，與我的代碼中的原因大致相同，我敢肯定，td.fileBoxContainer的內容在啓動時是可見的，但是，即使是slideDown/slideUp代碼似乎也不會如此操作應該。這裏一定會有不正常的事情發生。 – VoidKing

也就是說，它不會平滑地生成動畫。（不知道我說的內容開始顯示，我忘了重新添加'display：none;'這個例子。 – VoidKing

發表你的代碼在jsfiddle上，我修改它.. – Ciccio

在jQuery中，如何在display none和display table（或其等效視圖）之間創建動畫？

回答

相關問題