动画菜单淡入并降至位置

Question

我正在尝试创建我的第一个动画菜单。

这是我想要实现的目标的图像

箭头表示我希望在单击菜单按钮时名称下降和淡入。我还想让菜单在页面上均匀分布。

我已经开始创造一个小提琴，但我没有在哪里快速

这是：http://jsfiddle.net/dz0cee5L/21/

这是css

.button-container {
    width:100%;
}
.button {
    padding: 7px 30px;
    cursor: pointer;
    vertical-align: middle; 
    border: 2px solid;
    display: inline-block;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    width:100%;
}
#navcontainer ul li { 
    display: inline; 
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #dbd5d1;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #b93037;
}

Answer 1

您可以使用opacity和top的CSS转换。

菜单应为position: absolute，因此不会移动内容，然后可以使用top: 100%和opacity: 0以及transition: opacity 1s, top 1s隐藏内容为了动画。然后使用jQuery切换显示类。

CSS：

#navcontainer {
    opacity: 0;
    position: absolute;
    top: -100%;
    transition: opacity 1s, top 1s;
}
#navcontainer.showing {
    opacity: 1;
    top: 100%;
}

JS：

$(".button").click(function() {
    $("#navcontainer").toggleClass("showing");
});

DEMO