只隐藏底部内容

Question

我正在导航元素上做一个小动画，但我遇到了一个问题。动画div的内容应该只能在导航元素的顶部显示，而不能在bot上显示。但动画div的高度大于nav元素的高度，所以动画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而不是动画。 这种方式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%;** 
}