javascript - jQuery 动画表格单元格

Question

我正在尝试为 a 标签制作动画，它具有 table-cell 的 css 属性以获得我正在寻找的效果。当有人使用 jQuery 单击它时，我希望为其设置动画，但它不起作用，我认为这是因为 table-cell 但删除了 table-cell 打破布局。 Here is the page I am working with .

这是一个 fiddle :http://jsfiddle.net/nEryb/

.clip{
    background-color: #373938;
    min-height: 100%;
    height: 100%;
    width: 300px;
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: table-cell;
    box-shadow: -2px 0 5px rgba(0,0,0,.2), -2px -2px 5px rgba(0,0,0,.2), -2px 2px 5px rgba(0,0,0,.2);
    text-align: center;
    filter: grayscale(100%);
    filter: url(/media/images/new/filters.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
    position: relative;
}

这里是 jquery:

$(document).on("click", "a.clip", function(e){
    e.preventDefault();
    window.history.pushState("Gallery", "Gallery", $(this).attr("href"));
    $("a.clip.hover").animate({
        height: "20px"
    }, "fast");
});

我该怎么做才能让它发挥作用？

Answer 1

为了正确使用CSS table-model ，你必须了解浏览器如何呈现这样的模型，以及什么each concept really means .

简而言之，您的代码不起作用，因为表格单元格应该占据整个空间，以便它可以覆盖网格的所有相对坐标。如果您考虑表应该如何工作，这是有道理的。这就是为什么在历史上很难让表正常运行，您可以在 SO 上看到许多此类问题的示例。

一个解决方案可能是将您的动画和大部分 CSS 属性实际应用到包含的 block 元素。

在下面的示例中，我使用了您的标记，包括 anchor 元素，但在 CSS 中将其设为 display: block。

Example 1

另一种解决方案是放弃表格模型 并在您的元素上使用inline-block。去掉 display: table 并将 display: table-cell 更改为 display: inline-block；给它一个明确的 width: 20% 而且，只要你保持 min-height: 100% 并且不改变它，你的高度就不会改变.

Example 2