jQuery左侧浮层弹出效果

左侧弹出的浮动层，用 jQuery 做其实挺，结构也简单，交互也流畅。你只需要写一个固定在左边的 div，平时用 display: none 隐藏起来，用户点击按钮时再用 fadeIn 慢慢弹出来，效果还挺顺滑。

样式这块，主要靠 position: fixed 把浮动层钉在页面左边，再设个合适的宽高，颜色什么的看你喜欢。触发按钮嘛，可以用 #triggerElement 来做事件绑定，jQuery 的 .click() 方法就能轻松搞定。

如果你想加点细节，比如滚动时浮动层不动，或者窗口变窄时自适应宽度，那就再监听下 $(window).scroll() 和 $(window).width()，逻辑不复杂，体验会好不少。

整体来看，jQuery 在这类 UI 小功能上还是挺好用的。语法直观，响应也快，适合快速实现交互原型。如果你还想看点类似的效果，下面这几个资源也不错：

• jQuery 弹出层与浮动层
• 弹出登录框的 JQuery 弹出浮动层
• 左侧隐藏 div 点击按钮弹出

如果你在做后台、侧边栏、或者需要一个轻量弹出菜单，这种方式挺适合的。加点动画、响应式适配，体验立马提升不少。