jQuery 特效速查
jQuery 时代（2010 前后）几乎所有网页特效都是它做的：animate() 动画、slideDown/fadeIn 切换、插件生态（轮播、灯箱、手风琴）。语法极简，至今仍在大量老项目中服役。
现代项目已很少引入 jQuery：原生 JS（querySelector/classList/rAF）覆盖了 90% 的 jQuery 常用 API，且更轻。但维护老项目、做快速原型时 jQuery 仍然高效。
- show/hide/fadeIn/slideUp：一行完成显示切换
- animate({opacity:.5}, 400)：补间动画（已不如 CSS 过渡）
- $(document).on() 天然事件委托；链式调用
HTML
<style> #jqd .box { width: 120px; height: 60px; background: #4a9eff; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 10px auto; } #jqd button { padding: 6px 14px; margin: 4px; border: none; border-radius: 6px; background: #f0e6ff; cursor: pointer; } </style> <div id="jqd" style="text-align:center;padding:20px 0"> <button id="jqFade">淡入淡出</button><button id="jqSlide">滑上滑下</button> <div class="box">jQuery 效果</div> </div> <script> // 演示相同逻辑的“jQuery 写法 vs 原生写法”（不引入 jQuery，用原生等价实现） var box = document.querySelector('#jqd .box'); document.getElementById('jqFade').addEventListener('click', function () { // jQuery: $('.box').fadeToggle(400) box.style.transition = 'opacity .4s'; var hidden = getComputedStyle(box).opacity === '0'; box.style.opacity = hidden ? '1' : '0'; }); document.getElementById('jqSlide').addEventListener('click', function () { // jQuery: $('.box').slideToggle(400) box.style.transition = 'height .4s ease, padding .4s ease'; if (box.style.height === '0px') { box.style.height = '60px'; } else { box.style.height = '0'; box.style.padding = '0'; } }); </script>
本节要点jQuery 特效 = fade/slide/animate 全家桶；现代项目用原生等价实现更轻。
