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>

我想获得以下功能：

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的{{1}不支持对display属性的更改}}
我还尝试设置.animate()的CSS规则，以反映table.topSectionTable和overflow: hidden;，然后仅设置height属性的动画。 这里，高度上的动画是成功的，然而，height: 0px;的内容显示高度是否为0（即使高度在td.fileBoxContainer元素的点击上扩展和收缩

我已经在网站上看到过这种情况，所以我知道有办法。此外，我想在jQuery而不仅仅是CSS3中执行此操作，因为我想在IE8中保留此功能，如果可能的话，我知道CSS3没有机会这样做。

更新 - 以高度0和过度隐藏的方式进行尝试，加上动态的动画

jQuery代码：

div#dropDownArrow

CSS：

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

HTML与上面的内容相同

我的C＃getFileBox方法：

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

td.pageSettingsContainer
{

}

td.fileBoxContainer
{

}

Answer 1

尝试slideUp()和slideDown()，示例here和文档here

Answer 2

是的，如说使用：

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

Answer 3

结束了这一次出局：

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

Transitions on the display: property

真正的重复（考虑到手头的问题，尤其是答案）应该是这样的：

overflow:hidden not working when using tables

我的问题的简短答案是：

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

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

至于为什么slideUp()和slideDown()不起作用，我只能推测当jQuery实现这些函数时，它会使用一些（如果不是全部）相同的功能，这些功能显然会在非块级元素。

如何在jQuery中显示无显示和显示表（或其可视等效物）之间的动画？

3 个答案: