Livre-se de saltos causados ​​por margens em colapso em elementos ocultos

Eu realmente gosto do comportamento das margens recolhíveis em elementos de bloco, no entanto, pode ser bastante irritante quando afeta um contêiner oculto que você está deslizando / desaparecendo à vista. Veja isto, por exemplo:

<h1>Hello</h1>
<div style="display:none">
    <h2>Hidden sub-heading</h2>
</div>

Se o div oculto for aberto usando jQuery:

$('div').slideDown(500);

… a margem inferior de h1 e a margem superior de h2 não se recolherão até que a animação slideDown () seja concluída, resultando em um ‘salto’ perceptível.

Uma maneira fácil de se livrar desse problema é aplicar um preenchimento superior e inferior de pelo menos 1px ao contêiner pai (neste caso, o div oculto), efetivamente colocando uma pequena barreira entre h1 e h2, que bloqueia as margens de entrar em colapso.

Isso é fácil de fazer, dando ao contêiner oculto um nome de classe e definindo o preenchimento superior / inferior com CSS. Por exemplo:

.hidden
{
    display: hidden;
    padding: 1px 0;
}

–

<h1>Hello</h1>
<div class="hidden">
    <h2>Hidden sub-heading</h2>
</div>

Em uma de minhas compilações mais recentes, eu tinha alguns contêineres ocultos que não tinham nenhum preenchimento superior / inferior definido via CSS e não estava interessado em adicionar outro nome de classe a eles, então escrevi um pequeno pedaço de jQuery para verifique se o elemento do contêiner tinha qualquer preenchimento superior / inferior antes de executar a função slideDown (). Aqui está o exemplo, com um pequeno link para definir tudo.

<h1>Hello</h1>
<div id="more" style="display:none">
    <h2>Hidden sub-heading</h2>
</div>
<p>
    <a href="#" data-target="#more">Show the element with an ID of 'more'!</a>
</p>

–

$('[data-target]').on('click', function(e) {
    e.preventDefault();
    var target_selector = $(this).data('target');
    var target_element = $(target_selector);

    if (target_element.css('paddingTop') == '0px')
        target_element.css({paddingTop: '1px'});

    if (target_element.css('paddingBottom') == '0px')
        target_element.css({paddingBottom: '1px'});

    target_element.slideDown(500);
});

Você pode vê-lo em ação em artlines.co.uk – basta clicar nas setas laranja para revelar.

Espero que isso seja útil para algumas pessoas!