C# 在jQuery中，如何在显示无和显示表（或其视觉等价物）之间设置动画？

我一直在努力学习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>

我尝试过的事情：

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

• 使用jQuery的

  .animate（）

  和display属性。我不确定这里失败的原因，因为显示属性中的实际更改没有显示出来，但我猜jQuery的

  .animate（）

  不支持对

  display

  属性的更改
• 我还尝试为

  table.topSectionTable

  设置CSS规则，以反映

  溢出：隐藏和<代码>高度：0px，然后仅设置“高度”属性的动画。在这里，高度动画是成功的，但是，
  td.fileBoxContainer
  的内容显示高度是否为0（即使高度在单击
  div\dropDownArrow
  元素时展开和收缩）

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

更新--尝试将高度0和溢出隐藏，再加上JQUERY动画

jQuery代码：

CSS:

HTML与上面的相同

我的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;
}

publicstaticstringgetfilebox（字符串位置）
{
字符串内容=”；
string[]files=Directory.GetFiles（HttpContext.Current.Server.MapPath（“~/CMS files/”+location+“/”）；
foreach（文件中的var文件）
{
content+=Path.GetFileName（文件）；
内容+=“
”；
}
返回内容；
}

尝试

slideUp（）

和

slideDown（）

、示例和文档

是，如您所说，请使用：

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

---

最终找到了这个答案：

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

好吧，虽然这个页面是建议的副本：

真正的重复（考虑到眼前的问题，尤其是答案）应该是：

我的问题的简单答案是：

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

因此，我的解决方案是简单地将我的表包装在另一个div中，并应用

溢出：隐藏；

和高度，然后使用jQuery的

.animate（）

而不是表来定位它

---

至于为什么

slideUp（）

和

slideDown（）

不起作用，我只能推测，当jQuery实现这些函数时，它使用了一些（如果不是全部的话）明显在非块级元素上断裂的相同特性。

无论

@Html.Raw吐出什么，都可能是阳性的（ContentGenerator.getFileBox（“Tourism”）

没有改变样式？

高度：0；溢出：隐藏；

应该可以工作。@Snuffleupagus是的，它的行为好像应该可以工作，但是，c方法没有显示样式更改。就目前而言）是特定目录中的文件名列表，由标准的

元素分隔。即使如此，它也不会开始隐藏（也不会被隐藏）@Snuffleupagus我不确定我是否喜欢

slideUp/slideDown

的方式。它似乎不能顺利地制作动画。但是，关于你的建议，我已经附加了确切的代码（和CSS）我已经尝试过让这个方法工作。如果你不介意看一下，看看你的想法。@Snuffleupagus这里是

td.fileBoxContainer

元素的确切HTML内容（这是通过Chrome的“编辑为HTML”选项获得的，然后复制和粘贴整个元素及其内容）：

Native\u Words\u Native\u Warriors\u Exhibit.pdf
Tourism\u MS\u Building.jpg

这是在单击

div\35; dropDownArrow

之前获得的。但是，即使在启动时，该元素的内容仍然可见，即使该表缩小到0px。我确信，出于与我的代码中相同的原因，

td.fileBoxContainer

在启动时可见，但是，即使是slideDown/slideUp代码似乎也没有按应有的方式运行。这里一定发生了异常情况。也就是说，它不能顺利地设置动画。（不管我怎么说，我都忘了在这个例子中重新添加

display:none；

）。

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