jquery - 仅隐藏溢出底部内容

Question

我正在导航元素上制作一个小动画，但我遇到了问题。动画 div 的内容应该只在 nav 元素的顶部可见，而不是 bot。但是动画 div 的高度大于导航元素的高度，所以动画 div 显示在导航的底部。我针对这种情况做了一个 jsFiddle：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;
        });
});

我现在确实通过为导航 div 设置 650 像素的高度并隐藏了溢出来解决了这个问题。但这种方式看起来很讨厌，我不喜欢它。

Answer 1

您总是可以使用slideDown而不是animation。这样，div 将在滑动时扩展，而不仅仅是移动 div。

这是小提琴：http: //jsfiddle.net/umc4c/21/

*请注意，您必须稍微更改您的 css。您必须添加相对于导航类的位置。然后你必须添加底部：100%; 到#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%;**
}