🔍 基础知识：显示与隐藏
show() – 显示元素
大白话解释：让隐藏的元素重新显示出来。可以添加动画效果，比如淡入、下滑等。
用法：$("选择器").show(速度, 回调函数);
// 立即显示（无动画）
$(“#element”).show();
// 用600毫秒的动画显示
$(“#element”).show(600);
// 显示完成后执行函数
$(“#element”).show(“slow”, function() {
alert(“显示完成啦！”);
});
hide() – 隐藏元素
大白话解释：让元素从页面上消失。可以添加动画效果，比如淡出、上滑等。
用法：$("选择器").hide(速度, 回调函数);
// 立即隐藏
$(“#element”).hide();
// 用400毫秒的动画隐藏
$(“#element”).hide(400);
// 隐藏完成后执行函数
$(“#element”).hide(“fast”, function() {
console.log(“现在元素已经看不见了”);
});
💡 提示：速度参数可以是毫秒数值（如1000）或预定义字符串（”slow”（600ms）、”fast”（200ms））
🔄 切换效果：toggle()
toggle() – 切换显示状态
大白话解释：如果元素当前是显示的，就隐藏它；如果是隐藏的，就显示它。相当于show()和hide()的智能组合。
用法：$("选择器").toggle(速度, 回调函数);
// 切换显示状态
$(“.menu”).toggle();
// 带400ms动画的切换
$(“.panel”).toggle(400);
// 切换完成后执行函数
$(“.box”).toggle(“slow”, function() {
// 动画完成后执行的操作
});
💡 提示：toggle()非常适合制作下拉菜单、折叠面板等交互元素
🎭 淡入淡出效果
fadeIn() – 淡入效果
大白话解释：让元素以淡入方式显示（逐渐从不透明到透明）
用法：$("选择器").fadeIn(速度, 回调函数);
fadeOut() – 淡出效果
大白话解释：让元素以淡出方式隐藏（逐渐从透明到不透明）
用法：$("选择器").fadeOut(速度, 回调函数);
fadeToggle() – 淡入淡出切换
大白话解释：智能切换，如果元素是隐藏的，就淡入显示；如果是显示的，就淡出隐藏。
用法：$("选择器").fadeToggle(速度, 回调函数);
fadeTo() – 调整透明度
大白话解释：将元素调整到指定透明度（0=完全透明，1=完全不透明）
用法：$("选择器").fadeTo(速度, 透明度, 回调函数);
// 淡入效果
$(“.alert”).fadeIn();
// 淡出效果
$(“.notification”).fadeOut(“slow”);
// 淡入淡出切换
$(“.photo”).fadeToggle(500);
// 调整到半透明
$(“.overlay”).fadeTo(300, 0.5);
💡 提示：淡入淡出效果非常适合制作弹窗、通知消息、图片画廊等需要柔和过渡的元素
🛝 滑动效果
slideDown() – 向下滑动显示
大白话解释：像窗帘一样向下滑动显示元素（高度从0到实际高度）
用法：$("选择器").slideDown(速度, 回调函数);
slideUp() – 向上滑动隐藏
大白话解释：像收起窗帘一样向上滑动隐藏元素（高度从实际高度到0）
用法：$("选择器").slideUp(速度, 回调函数);
slideToggle() – 滑动切换效果
大白话解释：智能切换，如果元素是隐藏的，就向下滑动显示；如果是显示的，就向上滑动隐藏。
用法：$("选择器").slideToggle(速度, 回调函数);
// 向下滑动显示
$(“.dropdown-menu”).slideDown();
// 向上滑动隐藏
$(“.expander”).slideUp(“fast”);
// 滑动切换
$(“.details”).slideToggle(300);
滑动效果演示
滑动效果
💡 提示：滑动效果是制作下拉菜单、折叠面板、手风琴效果的理想选择
🚀 高级技巧与最佳实践
回调函数
大白话解释：在所有动画效果完成之后执行的操作。比如隐藏一个元素后显示另一个元素。
// 先淡出元素A，完成后显示元素B
$(“#elementA”).fadeOut(500, function() {
// 这个函数会在淡出完成后执行
$(“#elementB”).fadeIn(500);
});
停止动画
大白话解释：当多个动画效果叠加时，可以使用stop()停止当前动画
用法：$("选择器").stop(true, true);
// 点击时停止当前动画并开始新动画
$(“.box”).hover(function() {
$(this).stop(true).fadeTo(200, 0.7);
}, function() {
$(this).stop(true).fadeTo(200, 1);
});
动画队列
大白话解释：jQuery会自动把动画效果排成队列，一个接一个执行
// 动画队列示例
$(“.box”)
.slideUp(1000) // 先向上滑动隐藏
.slideDown(1000) // 完成后向下滑动显示
.fadeOut(500) // 完成后淡出
.fadeIn(500); // 完成后淡入
💡 最佳实践：在动画开始前使用stop(true)可以防止动画叠加造成的奇怪效果