Jquery CSS3动画行为怪异

我有一个淡入（jQuery）的弹出菜单。菜单包含几个自底向上淡入的项目（CSS3）。我在JSFIDLE中创建了一个更简单的变体，它工作得很好，但是当我尝试将它添加到我的站点时，它开始表现得很奇怪。我猜这个问题与项目周围的一个div有关，然而，经过很多努力，我仍然没有解决这个问题

更简单的变体（jsFiddle）。在这里，您可以看到正确的CSS3动画：

应该工作但不工作的（CSS3+jQuery）：

[编辑]我正在尝试在此页面上创建效果（按菜单按钮）：

代码笔脚本：

$（'.button'）。单击（函数（e）{
$（“.menu resp”）.fadeToggle（500）；
$（“.respm1、.respm2、.respm3、.respm4、.respm5、.respm6”）。切换（500）；
});
。菜单响应{
宽度：100%；
身高：100%；
位置：绝对位置；
背景色：#000000；
z指数：2；
显示：无；
}
.菜单响应菜单响应框{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.菜单对应菜单对应框项目{
字体系列：“Gotham light”，无衬线；
字体大小：300；
颜色：#ffffff；
字母间距：5px；
文本对齐：居中；
字体大小：calc（20px+0.4vw）；
宽度：300px；/*VIKTIGT*/
线高：230%；
光标：指针；
}
/*淡入效果*/
.respm1{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-0.9秒；
-webkit动画延迟：-0.9秒；
动画延迟：-0.9秒；
}
.respm2{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-1s；
-webkit动画延迟：-1s；
动画延迟：-1s；
}
.respm3{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-0.6s；
-webkit动画延迟：-0.6s；
动画延迟：-0.6s；
}
.respm4{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-0.7s；
-webkit动画延迟：-0.7秒；
动画延迟：-0.7秒；
}
.respm5{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-0.8s；
-webkit动画延迟：-0.8s；
动画延迟：-0.8秒；
}
.respm6{
显示：无；
动画：fadein 0.5s；
-moz动画：fadein 0.5s；
-webkit动画：fadein 0.5s；
-o-动画：fadein 0.5s；
-moz动画延迟：-0.9秒；
-webkit动画延迟：-0.9秒；
动画延迟：-0.9秒；
}
@关键帧淡入淡出{
0% {
不透明度：0；
-moz变换：translateY（-40px）；
-ms变换：translateY（-40px）；
-webkit转换：translateY（-40px）；
转换：translateY（-40px）；
}
100% {
不透明度：1；
-moz变换：translateY（0px）；
-ms变换：translateY（0px）；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
不透明度：1；
}
}
@-moz关键帧fadein{
0% {
不透明度：0；
-moz变换：translateY（-40px）；
-ms变换：translateY（-40px）；
-webkit转换：translateY（-40px）；
转换：translateY（-40px）；
}
100% {
不透明度：1；
-moz变换：translateY（0px）；
-ms变换：translateY（0px）；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
不透明度：1；
}
}
@-webkit关键帧fadein{
0% {
不透明度：0；
-moz变换：translateY（-40px）；
-ms变换：translateY（-40px）；
-webkit转换：translateY（-40px）；
转换：translateY（-40px）；
}
100% {
不透明度：1；
-moz变换：translateY（0px）；
-ms变换：translateY（0px）；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
不透明度：1；
}
}
@-o-关键帧fadein{
0% {
不透明度：0；
-moz变换：translateY（-40px）；
-ms变换：translateY（-40px）；
-webkit转换：translateY（-40px）；
转换：translateY（-40px）；
}
100% {
不透明度：1；
-moz变换：translateY（0px）；
-ms变换：translateY（0px）；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
不透明度：1；
}
}

按
#1项
#2项
#3项
#4项
#5项
#6项目
看看这个，我想这是你想要的吗

代码的问题是，您的项目和容器具有
display:none

因此，他们都开始从中间出现。
我所做的是在容器上切换类
show
，将
opacity
值从
0
设置为
1
，并在项目上切换类
动画

我注意到的另一件事是，您的
动画延迟为负值，我将其恢复为负值。现在时机可能并不完美，但这将进一步帮助您

编辑：当前在
项
类上还有一个
不透明度：0
，以便在它们设置动画后显示它们。我设置了
动画填充模式：向前
，并向
菜单resp
类添加了一个过渡，以使显示更平滑：
transition:opacity.3s
我不明白你的问题是什么。单击此页面上的菜单：（我正在尝试重新创建相同的效果，效果在一个div（jsFiddle）上运行良好，但在几个div上表现怪异-Codepen）。定义行为古怪我刚刚做的，查看我链接的网站，你会看到我试图重新创建的效果。Thanx，这正是我想要创造的：）