elemento Animate que tem filhos posicionados absolutamente fora dela - - jQuery piscando

Question

Perdoe-me se isto tem sido abordado antes, não consegui encontrar nada.

Eu estou animando uma barra de conteúdo que que tem crianças posicionados absolutamente fora dela (via margens negativas). A ideia é que as crianças vão animar com a barra à medida que expande.

O que acontece é assim que a animação começa às crianças desaparecem, e depois reaparecer quando a animação está completa. É como se a necessidade de animação para completar antes de o navegador sabe onde colocar as crianças.

Eu tenho carregado um exemplo realmente simples aqui, todos os scripts incluídos na página: http://www.ismailshallis.com/jdemo/

O que está realmente acontecendo? Quais são as minhas opções para contornar este?

Muito obrigado antecipadamente,

Belinda

Answer 1

Quando jQuery é animar tanto a altura ou a largura de um elemento, ele irá definir automaticamente overflow: hidden no elemento enquanto a animação está acontecendo. Desde o seu elemento filho é posicionada no exterior, é tecnicamente parte do estouro. O comentário na fonte jquery perto do código que é que isto diz "// Certifique-se de que nada sai escondida." Se você incluir a fonte jquery descompactado e comentar a linha 4032 do jQuery-1.3.2.js (dentro da função animate):

//this.style.overflow = "hidden";

Você vai ver que a animação funciona da maneira desejada. Eu não tenho certeza de uma solução alternativa que não seja modificando a fonte jquery comentando essa linha acima.

Answer 2

A partir do jQuery 1.4.3 não há outra solução que não requer modificação de jQuery. Se você definir o estilo 'estouro' do elemento que você está animando como um estilo inline antes de iniciar a animação, em seguida, jQuery não vai definir o estilo 'estouro' para escondido. Por exemplo:

<script type="text/javascript">
    $(document).ready(function() {
        $("#box a").click(function() {
            $("#box")

            // Prevents absolutely positioned elements from getting clipped.
            .css('overflow', 'visible')

            .animate({
                height: "410px"
            })

            // Reset the 'overflow' style.  You could also put this in the 
            // animate() callback.
            .css('overflow', '');
        });
    });
</script>

Answer 3

Bem - parece que é uma função do navegador ou jQuery, não necessariamente da maneira que você construiu seu HTML ou Javascript. Digo isto porque parece apenas a área de pixels dentro da caixa delimitadora do elemento DOM parece ser processado (tente mover o texto para que metade do texto está fora e metade dentro ... você vê um "cut off" peça de texto como ele anima.)

Então aqui está o trabalho em torno: Ele usa um DIV invólucro em torno "#box" e "#outside" de tal forma que ambos estão dentro da caixa delimitadora do invólucro

.

CSS:

    #boxWrapper {
        position: fixed;
        top: 50%;
        left:  50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -120px; /* extra 20px for the #outside */
        background:#ccc;
    }

    #box {
        background: #000;
        height:100%;
        width:100%;
        margin-top:20px; /* give 20px for the #outside */
    }

    #outside {
        background:darkblue;
        position: absolute;
        top: 0px;
        right: 0; }

E o HTML:

<div id="boxWrapper">
    <div id="box">
        <a href="#">CLICK ME</a>
        <div id="outside">
            I'm positioned OUTSIDE the box
        </div>
    </div>
</div>

E o Javascript:

<script type="text/javascript">
    $(document).ready(function() {

            $("#box a").click(function(){
                $("#boxWrapper").animate({ 
                        height: "410px",
                        opacity: 0.9,
                        top: "25%"
                      }, 1000 );
                return false;
            });
        }); 

</script>   

Answer 4

Como alternativa, você pode indicar sua preferência de que o elemento permanecem visible usando a especificação !important.

#box {
  overflow: visible !important;
}