jQuery 效果隐藏与显示jQuery 提供了多种简单且强大的方法来控制元素的显示和隐藏包括基本切换、滑动效果、淡入淡出效果以及自定义动画。一、基本显示与隐藏1..hide()- 隐藏元素立即将元素的display属性设置为none。// 立即隐藏$(#myDiv).hide();// 隐藏所有 class 为 box 的元素$(.box).hide();// 隐藏所有段落$(p).hide();2..show()- 显示元素将元素的display属性恢复为原始值如block,inline等。// 立即显示$(#myDiv).show();// 显示所有 class 为 box 的元素$(.box).show();3..toggle()- 切换显示/隐藏根据元素当前状态切换如果可见则隐藏如果隐藏则显示。// 切换显示/隐藏$(#myDiv).toggle();// 切换所有列表项$(li).toggle();二、带动画的显示与隐藏jQuery 允许你为隐藏和显示添加动画效果使过渡更自然。1. 基本语法// 隐藏元素持续 1000 毫秒1 秒$(#myDiv).hide(1000);// 显示元素持续 500 毫秒$(#myDiv).show(500);// 切换显示/隐藏持续 800 毫秒$(#myDiv).toggle(800);2. 参数说明duration(可选): 动画持续时间。数字毫秒数如1000。字符串slow(600ms),normal(400ms),fast(200ms)。easing(可选): 动画缓动函数jQuery UI 提供如swing,linear。complete(可选): 动画完成后的回调函数。// 完整示例$(#myDiv).hide(1000,swing,function(){console.log(隐藏动画完成);});$(#myDiv).show(slow,function(){console.log(显示动画完成);});$(#myDiv).toggle(500,function(){console.log(切换完成);});三、滑动效果 (Slide)滑动效果通过改变元素的高度来实现展开和收起常用于手风琴菜单、折叠面板等。1..slideDown()- 向下滑动显示元素从高度 0 逐渐展开到原始高度。// 向下滑动显示持续 600ms$(#content).slideDown(600);// 使用预设速度$(#content).slideDown(slow);// 带回调$(#content).slideDown(1000,function(){console.log(展开完成);});2..slideUp()- 向上滑动隐藏元素从原始高度逐渐收缩到高度 0 并隐藏。// 向上滑动隐藏$(#content).slideUp(600);// 带回调$(#content).slideUp(1000,function(){console.log(收起完成);});3..slideToggle()- 滑动切换根据当前状态切换滑动显示或隐藏。// 点击按钮切换面板$(#toggleBtn).click(function(){$(#content).slideToggle(400);});4. 实战手风琴菜单$(.accordion-header).click(function(){// 关闭其他所有面板$(.accordion-content).slideUp(300);// 切换当前面板$(this).next(.accordion-content).slideToggle(300);});四、淡入淡出效果 (Fade)淡入淡出效果通过改变元素的透明度opacity来实现适合平滑过渡。1..fadeIn()- 淡入显示元素从透明opacity: 0逐渐变为完全不透明。// 淡入显示持续 800ms$(#image).fadeIn(800);// 使用预设速度$(#image).fadeIn(slow);// 带回调$(#image).fadeIn(1000,function(){console.log(淡入完成);});2..fadeOut()- 淡出隐藏元素从完全不透明逐渐变为透明opacity: 0然后设置为display: none。// 淡出隐藏$(#image).fadeOut(800);// 带回调$(#image).fadeOut(1000,function(){console.log(淡出完成);});3..fadeToggle()- 淡入淡出切换根据当前状态切换淡入或淡出。// 点击切换淡入淡出$(#fadeBtn).click(function(){$(#image).fadeToggle(600);});4..fadeTo()- 调整透明度将元素调整到指定的透明度不改变display属性元素仍占据空间。// 调整透明度为 0.5半透明持续 1000ms$(#box).fadeTo(1000,0.5);// 调整到 0.2$(#box).fadeTo(slow,0.2);// 回调$(#box).fadeTo(1000,0.5,function(){console.log(透明度调整完成);});五、自定义动画.animate()对于更复杂的动画需求可以使用.animate()方法自定义属性变化。1. 基本用法// 改变宽度和高度$(#box).animate({width:200px,height:200px},1000);// 改变透明度类似 fadeTo$(#box).animate({opacity:0.5},1000);// 改变位置$(#box).animate({left:100px,top:50px},1000);2. 多属性动画$(#box).animate({width:300px,height:300px,opacity:0.7,marginLeft:50px},1500,swing,function(){console.log(动画完成);});3. 队列动画$(#box).animate({width:100px},1000).animate({height:100px},1000).animate({opacity:0.5},1000).animate({width:200px},1000);4. 相对值动画// 相对当前值增加或减少$(#box).animate({width:50px,// 增加 50pxheight:-30px// 减少 30px},1000);六、停止与排队控制1..stop()- 停止当前动画停止当前正在执行的动画并立即跳转到最终状态。// 停止所有动画$(#box).stop();// 停止当前动画队列不跳转继续执行后续动画$(#box).stop(true);// 清空队列// 停止当前动画跳转并清空队列$(#box).stop(true,true);// 第一个 true: 清空队列第二个 true: 立即跳转2..finish()- 完成所有动画立即完成当前元素上的所有动画队列。$(#box).finish();3. 动画队列jQuery 默认将动画放入队列中依次执行。// 默认队列执行$(#box).animate({width:100px},1000).animate({height:100px},1000);// 等待第一个完成后执行// 非队列执行立即执行$(#box).animate({width:100px},{duration:1000,queue:false// 不加入队列});七、实战示例1. 折叠/展开面板buttonidtoggle切换面板/buttondividpanelstyledisplay:none;p这里是面板内容.../p/divscript$(#toggle).click(function(){$(#panel).slideToggle(400);});/script2. 图片画廊淡入淡出dividgalleryimgsrcimg1.jpgclassactiveimgsrcimg2.jpgimgsrcimg3.jpg/divbuttonidprev上一张/buttonbuttonidnext下一张/buttonscriptletcurrentIndex0;const$images$(#gallery img);functionshowImage(index){$images.eq(currentIndex).fadeOut(500);currentIndexindex;$images.eq(currentIndex).fadeIn(500);}$(#next).click(function(){letnextIndex(currentIndex1)%$images.length;showImage(nextIndex);});$(#prev).click(function(){letprevIndex(currentIndex-1$images.length)%$images.length;showImage(prevIndex);});/script3. 模态框ModalbuttonidopenModal打开模态框/buttondividmodalstyledisplay:none;position:fixed;top:50%;left:50%;p模态框内容/pbuttonidcloseModal关闭/button/divscript$(#openModal).click(function(){$(#modal).fadeIn(300);});$(#closeModal).click(function(){$(#modal).fadeOut(300);});// 点击背景关闭$(#modal).click(function(e){if(e.targetthis){$(this).fadeOut(300);}});/script4. 加载指示器// 显示加载动画functionshowLoading(){$(#loading).fadeIn(200);}// 隐藏加载动画functionhideLoading(){$(#loading).fadeOut(200);}// 模拟 Ajax 请求$.ajax({url:api/data,beforeSend:showLoading,complete:hideLoading,success:function(data){console.log(data);}});八、注意事项与最佳实践1. 元素状态判断// 检查元素是否可见if($(#box).is(:visible)){console.log(元素可见);}// 检查元素是否隐藏if($(#box).is(:hidden)){console.log(元素隐藏);}2. 避免频繁触发// ❌ 可能导致动画队列堆积$(#btn).click(function(){$(#box).slideToggle(500);});// ✅ 使用 stop() 防止堆积$(#btn).click(function(){$(#box).stop(true,true).slideToggle(500);});3. 性能优化避免对大量元素同时执行动画可能导致页面卡顿。使用 CSS3 动画替代 jQuery 动画性能更好jQuery 仅用于控制类名切换。// CSS3 方案$(#box).addClass(animate-fade);4. 兼容性jQuery 动画在旧浏览器中兼容性较好。对于现代浏览器优先考虑 CSS3transition和animation。九、效果速查表方法说明参数示例.hide()立即隐藏.hide().show()立即显示.show().toggle()切换显示/隐藏.toggle().hide(duration)动画隐藏.hide(1000).show(duration)动画显示.show(slow).toggle(duration)动画切换.toggle(500).slideDown()向下滑动显示.slideDown(600).slideUp()向上滑动隐藏.slideUp(600).slideToggle()滑动切换.slideToggle(400).fadeIn()淡入显示.fadeIn(800).fadeOut()淡出隐藏.fadeOut(800).fadeToggle()淡入淡出切换.fadeToggle(600).fadeTo(duration, opacity)调整透明度.fadeTo(1000, 0.5).animate(props, duration)自定义动画.animate({width: 100px}, 1000).stop()停止动画.stop(true, true).finish()完成所有动画.finish()jQuery 的显示与隐藏效果功能丰富且易于使用通过合理使用这些方法可以为用户带来流畅、自然的交互体验。在实际项目中注意性能优化和动画队列管理避免不必要的卡顿。