jQuery动画表格单元格

Question

I am trying to animate an a tag, it has a css property of table-cell to get the effect I am looking for. I am looking to animate it when someone clicks on it using jQuery, but it isn't working, and I think it is because of the table-cell but removing table-cell breaks the layout. Here is the page I am working with .

Here is a 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;
}

Here is the 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");
});

What can I do to get this to work?

Answer 1

In order to properly use the CSS table-model , you have to understand how the browser renders such a model, and what each concept really means .

In a nutshell, your code doesn't work because a table cell is supposed to take the entirety of the space so that it might cover all the relative coordinates of the grid. If you think about how a table should work, it makes sense. That is why it has historically been difficult to make tables behave, and you can see many examples of such questions here on SO.

One solution could be to actually apply your animation and most of your CSS properties to an included block element.

In the following example I used your markup, including an anchor element, but making it display: block in the CSS.

Example 1

Another solution would be to forego the table model and use inline-block on your elements. Get rid of that display: table and change display: table-cell to display: inline-block ; give it an explicit width: 20% and, also, your height is not going anywhere as long as you keep that min-height: 100% and don't change it.

Example 2

Answer 2

You can use display: inline-block because table-model somehow does not allow you to change the sizes of the relative cells. Anyway, on your jQuery code, you should use the $(this) selector for animating the specific box clicked

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

Here is an update: http://jsfiddle.net/nEryb/1/

I also noticed your selector has a.clip.hover . You should be using the hover event instead of click .