Question

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

这是一个小提琴：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属性实际应用于包含的块元素。

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

Example 1

另一个解决方案是放弃表模型并在元素上使用inline-block。摆脱display: table并将display: table-cell更改为display: inline-block;给它一个明确的width: 20%，而且，只要你保留min-height: 100%并且不改变它，你的身高就不会去任何地方。

Example 2

Answer 2

您可以使用display: inline-block因为表格模型不允许您更改相对单元格的大小。无论如何，在您的jQuery代码上，您应该使用$(this)选择器为单击的特定框设置动画

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

以下是更新：http://jsfiddle.net/nEryb/1/

我还注意到你的选择器有a.clip.hover。您应该使用hover事件而不是click。

jQuery动画表格单元格

2 个答案: