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. 自定义拖拽效果letisDraggingfalse;letstartX,startY,startLeft,startTop;$(#draggable).mousedown(function(e){isDraggingtrue;startXe.pageX;startYe.pageY;startLeft$(this).position().left;startTop$(this).position().top;$(this).css(cursor,move);});$(document).mousemove(function(e){if(!isDragging)return;constdxe.pageX-startX;constdye.pageY-startY;// 实时移动无动画$(this).css({left:startLeftdx,top:startTopdy});});$(document).mouseup(function(){isDraggingfalse;$(#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. 轮播图自动切换letcurrentIndex0;const$slides$(.slide);functionnextSlide(){$slides.eq(currentIndex).fadeOut(500);currentIndex(currentIndex1)%$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。