jQuery弹出层淡入淡出滑动效果

点击按钮的弹出层，带个小关闭按钮，还能淡入淡出、滑动进场，看着舒服，用着顺手，适合做提示框或者模态窗那种场景。

用的是老朋友 jQuery，事件绑定、动画调用这些都熟门熟路。比如 fadeIn()、fadeOut()、slideToggle()，写起来顺，响应也快。

你只要在 $(document).ready() 里绑定下点击事件，一个 #openBtn 触发显示 #popup，再在弹出层里加个 #closeButton 来控制关闭，整个交互逻辑就清晰。

CSS 方面也别忘了，用 display: none 控制初始状态，再配上 position: fixed 和 transform: translate(-50%, -50%) 把弹出层居中，视觉效果也还不错。

需要注意的是，关闭按钮如果是链接，记得加上 event.preventDefault()，免得页面跳转影响体验。动画结束后还能接回调函数，想加点小逻辑也方便。

如果你要做个不太复杂的弹窗交互，这个小功能挺实用的，想快速上线就靠它。懒得手写？去下面这几个链接看看，有现成代码，拿来改一改就能用：