Javascript 如何使用jQuery和转换从右侧滑入？

我有一个代码，当你点击

按钮时，会出现
div
。但问题是，我的
div
从顶部滑入，当有人单击按钮时，它会从右侧滑入，并带有过渡。但我不知道如何更改我当前的代码以使其工作。我知道我不能从
display:none
切换到
visibility
和
opacity
来添加CSS动画，对吗？那么我该怎么做才能使这一切尽可能顺利呢？谁能帮我看看吗

这是我的密码：


$（函数（）{
$（“a切换”）。单击（函数（）{
$（“#slidein”）.slideToggle（）；
返回false；
});
});
#幻灯片{
显示：无；
}
.卡片{
背景色：#bdbd；
文本转换：大写；
位置：固定；
右：0；
排名：0；
身高：100%；
}
.结束{
位置：绝对位置；
右：0；
背景：#fff；
不透明度：1；
颜色：#29292b；
字体大小：10px；
文字装饰颜色：#7575；
}

x接近
正文
文本
正文
正文

正文
文本
正文
文本
您可以使用CSS
转换来实现您的目标。最初，滑入面板
#slidein
将位于屏幕右边缘之外。当您单击
A#toggle
时，将切换
中的CSS类
。单击
按钮。关闭
将从
#slidein
中删除
中的类，该类将滑出面板


$（函数（）{
$（“a切换”）。单击（函数（）{
$（“#slidein”）.toggleClass（“in”）；
返回false；
});
$（“button.close”）。单击（函数（）{
$（“#slidein”）.removeClass（“in”）；
返回false；
});
});
#幻灯片{
位置：固定；
排名：0；
宽度：100%；/*修改此值以满足您的需要*/
右：-100%；/*修改此值以满足您的需要*/
/*css转换*/
-webkit过渡：右500ms缓解；
-moz过渡：右500ms放松；
-o型过渡：右500ms缓解；
过渡：右500ms缓解；
}
#滑入{
右：0；
}
.卡片{
背景色：#bdbd；
文本转换：大写；
身高：100%；
}
.结束{
位置：绝对位置；
右：0；
背景：#fff；
不透明度：1；
颜色：#29292b；
字体大小：10px；
文字装饰颜色：#7575；
}

x接近
正文
文本
正文
正文

正文
文本
正文
文本
很乐意帮忙@追溯