如何在jQuery中显示“无”和“显示表”(或其视觉等效)之间进行动画？

Question

我一直在尝试学习jQuery的.animate()函数，我已经有了一些要动画的东西，但是我还没有能够以我想要的方式为我的表设置动画。

以下是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>

我想获得以下功能：

1. table.topSectionTable一开始就像分配了display: none一样。
2. 单击div#dropDownArrow时，应该(在动画时)显示表的高度在增长(不管是否实际调整了高度属性)，并在扩展时显示表的内容。
3. 一旦div#dropDownArrow再次被单击，它就应该反向动画，从而隐藏表并缩小其高度(或其外观)。

为此，我已经使用了一些没有动画(JQuery)的简单代码：

$("#dropDownArrow").toggle(function () {
    $(".topSectionTable").css("display", "table");
    $("#dropDownArrow").html("▼");
},
function () {
    $(".topSectionTable").css("display", "none");
    $("#dropDownArrow").html("►");
});

我尝试过的事物：

• 使用jQuery的.animate()和display属性。这里我不确定失败的原因，因为显示属性的实际更改没有显示出来，但我猜jQuery的.animate()不支持对.animate()属性的更改。
• 我还尝试为table.topSectionTable设置CSS规则，以同时反映overflow: hidden;和height: 0px;，然后只动画“高度”属性。在这里，关于高度的动画是成功的，但是，td.fileBoxContainer的内容显示了高度是否为0(尽管高度扩展并收缩到div#dropDownArrow元素的单击中)。

我在网站上经常看到这种情况，所以我知道有一种方法。此外，我希望在jQuery中这样做，而不仅仅是CSS3，因为如果可能的话，我也希望在IE8中保留这个功能，而且我知道CSS3没有机会这样做。

更新--尝试使用高度0和溢出隐藏的方式，加上JQUERY动画

jQuery代码：

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

CSS：

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

td.pageSettingsContainer
{

}

td.fileBoxContainer
{

}

和上面的HTML相同

My 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;
}

Answer 1

最后想出了一个：

好的，虽然这个页面是建议的复制：

显示上的转换:属性

真正的重复(考虑到眼前的问题，尤其是答案)应该是这样的：

溢出:在使用表时隐藏不工作。

我的问题的简单答案是：

“溢出”仅适用于块级元素。表元素不是块元素。“。

因此，我的解决方案是简单地将我的表包装在另一个div中，并将overflow: hidden;和高度应用到它，然后使用jQuery的.animate()而不是表来针对它。

至于为什么slideUp()和slideDown()不能工作，我只能推测，当jQuery实现这些函数时，它使用了一些(如果不是全部)相同的特性，这些特性显然破坏了非块级元素。

Answer 2

尝试slideUp()和slideDown()、示例这里和文档这里

Answer 3

是的，如所言，使用：

$("#dropDownArrow").toggle(function () {
  $(".topSectionTable").slideDown();
  $("#dropDownArrow").html("▼");
},
function () {
  $(".topSectionTable").slideUp();
  $("#dropDownArrow").html("►");
});