jQuery 效果 - 淡入淡出

jQuery 效果淡入淡出 (Fade Effects)淡入淡出效果通过改变元素的透明度opacity来实现视觉上的平滑过渡而不会改变元素的布局元素在隐藏时仍占据空间除非配合其他方法。这是 jQuery 中最常用的动画效果之一。一、核心方法详解1..fadeIn()- 淡入显示将隐藏的元素从透明opacity: 0逐渐变为完全不透明opacity: 1并显示出来。语法$(selector).fadeIn(duration,easing,callback);参数duration(可选): 动画持续时间。数字毫秒数如1000。字符串slow(600ms),normal(400ms),fast(200ms)。easing(可选): 缓动函数需 jQuery UI默认swing。callback(可选): 动画完成后的回调函数。示例// 立即淡入默认 400ms$(#box).fadeIn();// 1 秒后淡入$(#box).fadeIn(1000);// 使用预设速度$(#box).fadeIn(slow);// 带回调$(#box).fadeIn(1000,function(){console.log(淡入完成);});2..fadeOut()- 淡出隐藏将可见的元素从完全不透明逐渐变为透明opacity: 0最后将display设置为none元素不再占据空间。语法$(selector).fadeOut(duration,easing,callback);示例// 淡出隐藏$(#box).fadeOut();// 2 秒后淡出$(#box).fadeOut(2000);// 带回调$(#box).fadeOut(1500,function(){console.log(淡出完成元素已隐藏);});注意fadeOut结束后元素的display属性变为none此时元素不可见且不占空间。再次调用fadeIn可以恢复。3..fadeToggle()- 淡入淡出切换根据元素当前状态自动切换如果元素可见 → 执行fadeOut。如果元素隐藏 → 执行fadeIn。语法$(selector).fadeToggle(duration,easing,callback);示例// 点击按钮切换淡入淡出$(#toggleBtn).click(function(){$(#content).fadeToggle(600);});// 带回调$(#toggleBtn).click(function(){$(#content).fadeToggle(800,function(){console.log(切换完成);});});4..fadeTo()- 调整透明度将元素的透明度调整到指定值0到1之间不会改变display属性元素始终占据空间。语法$(selector).fadeTo(duration,opacity,easing,callback);参数duration: 必需持续时间。opacity: 必需目标透明度0.0完全透明1.0完全不透明。示例// 调整为半透明0.5$(#box).fadeTo(1000,0.5);// 调整为几乎透明0.1$(#box).fadeTo(slow,0.1);// 回调$(#box).fadeTo(1000,0.3,function(){console.log(透明度调整完成);});区别fadeOut最终会让元素消失display: none而fadeTo(0)只是让元素透明opacity: 0元素仍占据布局空间。二、实战应用场景1. 图片画廊切换dividgalleryimgsrcimg1.jpgclassactiveimgsrcimg2.jpgstyledisplay:none;imgsrcimg3.jpgstyledisplay:none;/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);});/script2. 模态框Modal淡入淡出buttonidopenModal打开弹窗/buttondividmodalstyledisplay:none;position:fixed;top:20%;left:30%;background:#fff;padding:20px;h3模态框/h3p这是弹窗内容.../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);}});/script3. 表单验证错误提示inputtypetextidusernameplaceholder用户名spaniderrorstylecolor:red;display:none;用户名不能为空/spanbuttonidsubmit提交/buttonscript$(#submit).click(function(){constval$(#username).val();if(val){// 淡入错误提示$(#error).stop(true,true).fadeIn(400);$(#username).focus();}else{// 淡出错误提示$(#error).fadeOut(400);alert(提交成功);}});// 输入时淡出错误提示$(#username).on(input,function(){if($(this).val()){$(#error).fadeOut(200);}});/script4. 加载指示器// 显示加载动画functionshowLoading(){$(#loading-spinner).fadeIn(200);}// 隐藏加载动画functionhideLoading(){$(#loading-spinner).fadeOut(200);}// 模拟 Ajax 请求$.ajax({url:api/data,beforeSend:showLoading,complete:hideLoading,success:function(data){console.log(data);}});三、高级技巧与注意事项1. 防止动画队列堆积如果用户快速多次点击按钮动画会排队执行导致延迟。使用.stop()解决。// ❌ 可能导致动画堆积$(#btn).click(function(){$(#box).fadeToggle(500);});// ✅ 使用 stop() 清除队列$(#btn).click(function(){$(#box).stop(true,true).fadeToggle(500);});stop(true, true): 第一个true清空队列第二个true立即跳转到最终状态。2. 链式调用淡入淡出方法支持链式调用可以组合多个效果。$(#box).fadeOut(500).delay(1000)// 等待 1 秒.fadeIn(500).css(border,1px solid red);// 动画完成后执行3. 与 CSS 配合jQuery 动画会覆盖内联样式。如果希望使用 CSS 过渡可以切换类名。// CSS.fade-in{opacity:1;transition:opacity0.5s;}.fade-out{opacity:0;transition:opacity0.5s;}// jQuery$(#box).addClass(fade-out).delay(500).removeClass(fade-out).addClass(fade-in);4. 判断元素状态// 检查是否可见if($(#box).is(:visible)){console.log(可见);}// 检查是否隐藏if($(#box).is(:hidden)){console.log(隐藏);}四、淡入淡出 vs 滑动效果特性淡入淡出 (Fade)滑动 (Slide)原理改变opacity改变height布局影响隐藏时仍占空间fadeTo或消失fadeOut隐藏时不占空间适用场景图片、弹窗、提示框折叠菜单、手风琴性能较高中等涉及重排五、速查表方法作用参数示例.fadeIn()淡入显示.fadeIn(1000).fadeOut()淡出隐藏.fadeOut(slow).fadeToggle()切换淡入淡出.fadeToggle(500).fadeTo(duration, opacity)调整透明度.fadeTo(1000, 0.5).stop()停止动画.stop(true, true).delay()延迟执行.delay(1000).fadeIn()jQuery 的淡入淡出效果简单易用通过合理的参数设置和回调函数可以构建出流畅的用户交互体验。在实际开发中注意使用.stop()防止动画堆积并根据场景选择合适的方法。