jQuery animate table-cell

Question

Я пытаюсь анимировать тег a, он имеет свойство css table-cell, чтобы получить эффект, который я ищу. Я ищу, чтобы оживить его, когда кто-то нажимает на него с помощью jQuery, но он не работает, и я думаю, что это из-за table-cell, но удаление table-cell приводит к разрыву макета. Here is the page I am working with.

Вот скрипка: 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 table-model вы должны понимать, как браузер отображает такую ​​модель и что такое each concept really means.

Вкратце, ваш код не работает, потому что ячейка таблицы должна полностью использовать пространство, чтобы оно могло охватывать все относительные координаты сетки. Если вы думаете о том, как таблица должна работать, это имеет смысл. Вот почему исторически было трудно заставить таблицы вести себя, и вы можете увидеть много примеров таких вопросов здесь, на 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

Answer 2

Вы можете использовать display: inline-block, так как таблица-модель как-то не позволяет изменять размеры относительных клеток. Во всяком случае, на коде 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.