jQuery 效果- 动画

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 对象});

六、动画速查表

jQuery 的.animate()提供了强大的自定义动画能力，通过组合多个动画、使用相对值和队列控制，可以创建出丰富的交互效果。在实际项目中，注意性能优化，对于复杂动画可考虑结合 CSS3 或引入 jQuery UI。