Javascript jQuery设置表格单元格动画

我正在尝试设置一个

a

标记的动画，它的css属性为

table cell

，以获得我想要的效果。我希望在有人使用jQuery单击它时为它设置动画，但它不起作用，我认为这是因为

表格单元格

，但删除

表格单元格

会破坏布局

这是一把小提琴：

以下是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");
});

---

如何才能使其正常工作？

为了正确使用，您必须了解浏览器如何渲染此类模型以及渲染内容

简而言之，您的代码不起作用，因为一个表单元应该占据整个空间，以便它可以覆盖网格的所有相对坐标。如果你想一想桌子应该如何工作，这是有道理的。这就是为什么历史上很难让表正常工作的原因，在这里你可以看到很多这样的问题

一种解决方案是将动画和大部分CSS属性应用于包含的块元素

在下面的示例中，我使用了您的标记，包括

anchor

元素，但在CSS中使其

display:block

另一个解决方案是放弃表模型，在元素上使用

inline block

。去掉

display:table

并将

display:table单元格

更改为

display:inline块

；给它一个明确的

宽度：20%

，而且，只要你保持

最小高度：100%

并且不改变它，你的身高就不会有任何变化

---

您可以使用

显示：内联块

，因为表格模型不允许您更改相对单元格的大小。无论如何，在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");
});

以下是更新：

---

我还注意到您的选择器有

a.clip.hover

。您应该使用

悬停

事件，而不是

单击

尝试使用$（'.clip'）启动；伟大的谢谢我采用了这种方法——你这么做是因为那些小猫，不是吗这就是原因！没有其他决定因素：）

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