切换jquery的转换效果

我正在尝试使用jquery切换创建一个隐藏菜单。 我有一个带有点击事件的按钮和一个带有切换事件的类菜单。 我想在菜单上进行CSS转换，或者显示效果

我有一个侧边栏，我想让菜单从左到右显示一个过渡效果或其他东西

$（'.menu\u btn'）。单击（函数（）{
$（'.menu'）.toggle（）；
})

菜单{
背景：#000；
宽度：240px；
身高：100%；
位置：固定；
左边距：100px；
显示：无
-webkit盒阴影：插入1px 0px 1px 0px rgba（232232,1）；
-moz盒阴影：插入1px 0px 1px 0px rgba（232232,1）；
盒影：插入1px 0px 1px 0px rgba（232232,1）；
}
.菜单容器{
填充：85px 10px 10px 10px；
位置：相对位置；
}

按钮
一些内容

如果我理解正确，您希望从左到右设置菜单动画

您可以在菜单上切换类，并添加一些过渡和样式

toggle（）

从

display:none

更改为

display:block

，这是一个不可设置动画的属性

使用

toggleClass（）

来…嗯…toggle:）/更改

菜单上的类

并设置这些类的样式

因此，请使用

left:-100%

和

left:200px

（如果您想定位菜单的位置）以及过渡或不透明

见下文

$（'.menu\u btn'）。单击（函数（）{
$（'.menu'）.toggleClass（'show-menu'）；
})

菜单{
背景：#000；
宽度：240px；
身高：100%；
位置：固定；
左-100%；
-webkit盒阴影：插入1px 0px 1px 0px rgba（232232,1）；
-moz盒阴影：插入1px 0px 1px 0px rgba（232232,1）；
盒影：插入1px 0px 1px 0px rgba（232232,1）；
过渡：1s放松；
不透明度：0；
}
.菜单容器{
填充：85px 10px 10px 10px；
位置：相对位置；
}
.显示菜单{
左：200px；
不透明度：1；
}

按钮
一些内容

使用fadeToggle（）而不仅仅是toggle（）。我尝试过，但当我单击菜单按钮时，菜单没有出现。