jQuery動畫表格單元格

Question

我試圖為a標簽設置動畫，它有一個table-cell的css屬性來獲得我正在尋找的效果。 當有人使用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");
});

我該怎么做才能讓它發揮作用？

Answer 1

為了正確使用CSS表模型 ，您必須了解瀏覽器如何呈現這樣的模型，以及每個概念的真正含義 。

簡而言之，您的代碼不起作用，因為表單元格應該占用整個空間，以便它可以覆蓋網格的所有相對坐標。 如果你考慮一個表應該如何工作，這是有道理的。 這就是為什么歷史上很難讓表格表現出來的原因，你可以在這里看到很多關於這些問題的例子。

一種解決方案可能是將您的動畫和大多數CSS屬性實際應用於包含的塊元素。

在下面的示例中，我使用了您的標記，包括一個anchor元素，但在CSS中display: block 。

例1

另一個解決方案是放棄表模型並在元素上使用inline-block 。 擺脫那個display: table和change display: table-cell to display: inline-block ; 給它一個明確的width: 20% ，而且，只要你保持min-height: 100% ，你的身高就不會去任何地方min-height: 100%並且不要改變它。

例2

Answer 2

您可以使用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 。