Jquery 仅隐藏溢出底部内容

我正在制作一个导航元素的小动画，但我遇到了一个问题。动画div的内容应仅在nav元素的顶部可见，而不是bot。但是动画div的高度大于nav元素的高度，因此动画div显示在nav的底部。我对这种情况做了一个粗略的解释：

---

我现在确实解决了这个问题，给导航div一个650px的高度和一个隐藏的溢出。但是那种方式看起来很糟糕，我不喜欢。

你可以使用向下滑动而不是动画。 这样，div将在滑动时展开，而不仅仅是移动div

这是小提琴：

*请注意，您必须稍微更改css。您必须添加相对于导航类的位置。然后你必须加上底部：100%；满足于回家

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

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