jQuery 效果：自定义动画 (Custom Animations)
jQuery 的.animate()方法是其动画系统的核心，它允许你通过改变 CSS 属性（如宽度、高度、位置、透明度等）来创建自定义动画。与内置的fadeIn、slideUp不同，.animate()可以控制几乎任何数值型 CSS 属性。
一、核心方法：.animate()
1. 基本语法
$(selector).animate({properties},duration,easing,callback);参数详解：
properties(必需): 一个对象，包含要动画改变的 CSS 属性和目标值。- 属性名必须使用驼峰命名法（如
marginLeft而不是margin-left）。 - 值必须是数值（带单位如
"px"）或字符串。
- 属性名必须使用驼峰命名法（如
duration(可选): 动画持续时间。- 数字：毫秒（如
1000）。 - 字符串：
"slow","normal","fast"。 - 默认：
400毫秒。
- 数字：毫秒（如
easing(可选): 缓动函数，定义动画的速度变化曲线。- 默认：
"swing"（先快后慢）。 "linear"：匀速。- 注：更多缓动函数需引入 jQuery UI。
- 默认：
callback(可选): 动画完成后的回调函数。
2. 简单示例
// 将元素向右移动 250px，宽度变为 100px，持续 2 秒$("#box").animate({left:"250px",width:"100px"},2000);// 改变透明度（类似 fadeTo）$("#box").animate({opacity:0.5},1000);// 改变字体大小$("#text").animate({fontSize:"2em"},1500);二、高级用法
1. 相对值动画 (Relative Values)
jQuery 支持在目标值前添加+=或-=来实现相对当前值的增减。
// 宽度增加 50px$("#box").animate({width:"+=50px"},1000);// 高度减少 30px$("#box").animate({height:"-=30px"},1000);// 向左移动 20px$("#box").animate({left:"-=20px"},1000);2. 队列动画 (Queue Animations)
jQuery 默认将动画放入队列中，按顺序依次执行。
// 依次执行：先变宽，再变高，最后变透明$("#box").animate({width:"200px"},1000).animate({height:"200px"},1000).animate({opacity:0.5},1000);- 原理：每个
.animate()调用都会将动画加入队列，前一个完成后才开始下一个。
3. 非队列动画 (Non-Queue Animations)
使用queue: false可以让动画立即执行，不等待前面的动画完成。
// 宽度变化加入队列$("#box").animate({width:"200px"},1000);// 透明度变化立即执行（不等待宽度动画）$("#box").animate({opacity:0.5},{duration:1000,queue:false});4. 自定义缓动函数 (Easing)
默认只有"swing"和"linear"。如需更多效果（如easeIn,easeOut），需引入jQuery UI。
// 使用 jQuery UI 的缓动函数$("#box").animate({left:"200px"},{duration:2000,easing:"easeOutBounce"// 需要 jQuery UI});三、动画控制方法
1..stop()- 停止动画
停止当前正在执行的动画，并立即跳转到最终状态。
// 停止所有动画$("#box").stop();// 停止当前动画，清空队列$("#box").stop(true);// 停止当前动画，立即跳转，并清空队列$("#box").stop(true,true);- 参数 1(
clearQueue):true清空后续队列。 - 参数 2(
jumpToEnd):true立即完成当前动画。
应用场景：防止用户快速点击导致动画堆积。
$("#btn").click(function(){$("#box").stop(true,true).animate({left:"200px"},1000);});2..finish()- 完成所有动画
立即完成当前元素上的所有动画队列（包括非队列动画）。
$("#box").finish();3..delay()- 延迟执行
在动画队列中插入延迟。
// 等待 1 秒后执行动画$("#box").delay(1000).animate({width:"200px"},1000);// 组合使用$("#box").animate({width:"100px"},500).delay(500)// 等待 500ms.animate({width:"200px"},500);四、实战示例
1. 自定义拖拽效果
letisDragging=false;letstartX,startY,startLeft,startTop;$("#draggable").mousedown(function(e){isDragging=true;startX=e.pageX;startY=e.pageY;startLeft=$(this).position().left;startTop=$(this).position().top;$(this).css("cursor","move");});$(document).mousemove(function(e){if(!isDragging)return;constdx=e.pageX-startX;constdy=e.pageY-startY;// 实时移动（无动画）$(this).css({left:startLeft+dx,top:startTop+dy});});$(document).mouseup(function(){isDragging=false;$("#draggable").css("cursor","default");});2. 弹跳效果 (Bounce)
结合相对值和多次动画模拟弹跳。
$("#ball").animate({top:"-=100px"},500,"swing").animate({top:"+=200px"},500,"swing").animate({top:"-=50px"},250,"swing").animate({top:"+=50px"},250,"swing").animate({top:"-=10px"},125,"swing").animate({top:"+=10px"},125,"swing");3. 轮播图自动切换
letcurrentIndex=0;const$slides=$(".slide");functionnextSlide(){$slides.eq(currentIndex).fadeOut(500);currentIndex=(currentIndex+1)%$slides.length;$slides.eq(currentIndex).fadeIn(500);}// 每 3 秒切换一次setInterval(nextSlide,3000);4. 进度条动画
functionanimateProgress(percent){$("#progress-bar").animate({width:percent+"%"},1500,function(){console.log("进度完成："+percent+"%");});}// 模拟加载animateProgress(0);setTimeout(()=>animateProgress(50),1600);setTimeout(()=>animateProgress(100),3200);五、注意事项与最佳实践
1. 仅支持数值型属性
.animate()只能改变数值型CSS 属性（如width,height,left,top,opacity,fontSize）。
- 不支持：
color,background-color,display等。 - 解决方案：
- 颜色动画需使用 jQuery UI 或自定义插件。
display属性使用show(),hide(),fadeIn(),fadeOut()等内置方法。
2. 性能优化
- 避免频繁重排：改变
width,height,top,left会触发重排（Reflow），性能开销较大。 - 优先使用
transform：现代浏览器中，使用 CSStransform性能更好。// jQuery 动画（重排）$("#box").animate({left:"100px"},1000);// CSS3 动画（重绘，性能更好）$("#box").css("transform","translateX(100px)");
3. 动画队列管理
- 使用
.stop(true, true)防止动画堆积。 - 使用
.finish()快速完成所有动画。
4. 回调函数中的this
在回调函数中，this指向当前被动画的 DOM 元素。
$("#box").animate({width:"200px"},1000,function(){console.log(this);// DOM 元素console.log($(this));// jQuery 对象});六、动画速查表
| 方法 | 作用 | 示例 |
|---|---|---|
.animate(props) | 自定义动画 | .animate({width: "100px"}, 1000) |
.stop() | 停止动画 | .stop(true, true) |
.finish() | 完成所有动画 | .finish() |
.delay(ms) | 延迟执行 | .delay(1000).animate(...) |
+=/-= | 相对值 | .animate({width: "+=50px"}) |
queue: false | 非队列执行 | .animate(..., {queue: false}) |
jQuery 的.animate()提供了强大的自定义动画能力，通过组合多个动画、使用相对值和队列控制，可以创建出丰富的交互效果。在实际项目中，注意性能优化，对于复杂动画可考虑结合 CSS3 或引入 jQuery UI。
