只隱藏底部內容

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%;** 
}