javascript - jQuery animate table-cell -

i trying animate a tag, has css property of table-cell effect looking for. looking animate when clicks on using jquery, isn't working, , think because of table-cell removing table-cell breaks layout. here page working with.

here 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 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 work?

in order use css table-model, have understand how browser renders such model, , each concept means.

in nutshell, code doesn't work because table cell supposed take entirety of space might cover relative coordinates of grid. if think how table should work, makes sense. why has historically been difficult make tables behave, , can see many examples of such questions here on so.

one solution apply animation , of css properties included block element.

in following example used markup, including anchor element, making display: block in css.

example 1

another solution forego table model , use inline-block on elements. rid of display: table , change display: table-cell display: inline-block; give explicit width: 20% and, also, height not going anywhere long keep min-height: 100% , don't change it.

example 2