使用jQuery改进lightbox动画

我已经在CSS中创建了一个基本的lightbox弹出窗口，我正在尝试在JS中实现一个更好的打开/关闭动画，但我不确定如何实现。我环顾了四周，但找不到具体的解决方案，而是整个JS解决方案。我正在使用

.fadeToggle

，但它不是很平滑

以下是我的标记：

<div class="popup-overlay"></div>
<div class="popup">
  <span class="close-button">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </span>
  <div>
    <h2>Heading</h2>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

---

这对我来说是一个挑战，因为我以前只使用本机javascript编写过lightbox，从未使用jQuery编写过

我试着用jquery动画

.fadeIn（）

，

.fadeOut（）

和

.delay（）

，但最后，正如您所看到的，我又回到了CSS

转换：不透明度

和javascript

设置超时（）

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'body'）。追加（''）；
$（'div'）.addClass（'lightbox'）；
var lightbox=$（'.lightbox'）；
lightbox.css({
'位置'：'绝对'，
“顶部”：“0”，
“左”：“0”，
“宽度”：“100%”，
“高度”：“100%”，
“背景色”：“rgb（0,0,0）”，
“不透明度”：“0”，
“过渡”：“不透明度1s缓解”，
});
lightbox.hover（函数（）{
$（this.css（'opacity'，'0.8'）；
});
lightbox.click（函数（）{
$（this.css（'opacity'，'0'）；
setTimeout（函数（）{lightbox.remove（）；}，1000）；
});
});
});

灯箱“我正试图在JS中实现更好的打开/关闭动画，但我不确定如何实现”-你能更明确一些吗？你说的“更好”是什么意思？@Rounin抱歉，这里是“默认”灯箱上的“打开/关闭”动画。
$('.popup .close-button, .popup-overlay').on('click', function() {
  $('.popup').fadeToggle('fast');
  $('.popup-overlay').fadeToggle('fast');
});