0

我正在尝试为a标签设置动画，它有一个 css 属性table-cell来获得我正在寻找的效果。当有人使用 jQuery 单击它时，我希望对其进行动画处理，但它不起作用，我认为这是因为table-cell删除table-cell会破坏布局。这是我正在使用的页面。

这是一个小提琴：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");
});

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

4

2 回答 2

1

为了正确使用CSS table-model，您必须了解浏览器如何呈现这样的模型，以及每个概念的真正含义。

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

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

在下面的示例中，我使用了您的标记，包括一个anchor元素，但display: block在 CSS 中制作。

Example 1

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

Example 2

于 2013-07-24T02:39:46.670 回答
1

您可以使用display: inline-block，因为 table-model 以某种方式不允许您更改相关单元格的大小。无论如何，在您的 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.

于 2013-07-24T02:47:55.773 回答