Ocultar solo el contenido inferior de desbordamiento

Estoy haciendo una pequeña animación en un elemento de navegación, pero tengo un problema. El contenido del div animado solo debe ser visible en la parte superior del elemento de navegación y no en el bot. Pero la altura de la div animada es mayor que la altura del elemento de navegación, por lo que la div animada aparece en la parte inferior de la navegación. Hice un jsFiddle con la situación: http://jsfiddle.net/umc4c/

// Homepage navigatie fadeIn + contentblok animatie
$('#content_home').hide();
$('nav').hide().fadeIn(1200, function(){
    var result = $("#content_home").outerHeight();

    $('#content_home').animate({marginTop: -Math.abs(result)},1000);
    $("#content_home").css("display", "block");
});

// Homepage navigatie animatie + url click event
$('nav a').click(function(event){
    event.preventDefault();
    var href = this.href;

    $('nav').animate({
        marginTop: '-650px'}, 
        1000,
        function(){
            window.location = href;
        });
});

Solucioné este problema ahora dándole al div de navegación una altura de 650 px y un desbordamiento oculto. Pero esa forma me parece muy fea y no me gusta.

preguntado el 16 de abril de 13 a las 08:04

1 Respuestas

Siempre podrías usar bajar deslizándose en lugar de animación. De esta manera, el div se expandirá a medida que se deslice en lugar de simplemente mover el div.

aquí está el violín: http://jsfiddle.net/umc4c/21/

* Tenga en cuenta que tendría que cambiar un poco su css. Tendría que agregar una posición relativa a su clase de navegación. Luego tienes que agregar bottom:100%; a #content_home.

nav {
    margin-top:400px;
    width:500px;
    background-color:grey;
    height:120px;
    **position:relative;**
}
#content_home {
    padding:50px;
    position:absolute;
    z-index:-1;
    background-color:#000;
    height:200px;
    width:200px;
    color:#fff;
    **bottom:100%;**
}

Respondido 29 Abr '13, 09:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.