jQuery和Ajax实战教程（第2版）课件 第4章-动画

第4章动画jQuery和Ajax实战教程本章内容4.1引言animate()方法的优势与特点4.2animate()方法基本使用、回调函数、实战案例4.3快捷动画方法slideUp、slideDown、fadeIn、fadeOut4.4多段动画的控制动画排队、stop()和delay()方法4.5CSS3transition过渡jQuery结合transition实现动画4.6-4.8实战案例豌豆射手、抽奖转盘、熊猫卡片等掌握jQuery动画核心技术·提升网页交互体验4.1引言-animate()方法的优势无需精确计算自动处理动画步长、定时器频率等数值轻松制作回调函数便捷处理动画结束后的后续操作方便制作复杂动画轻松实现多段动画、连续运动等效果缺点：animate()不支持transform、background-color等属性解决方案：结合CSS3transition实现4.2.1animate()基本使用基本语法$(选择器).animate(终点样式,总时长);代码示例$("#box").animate({"left":800,"top":300,"width":100,"height":100,"border-radius":"50%"},5000);动画效果盒子用5秒从(0,0)运动到(800,300)，并从方形变为圆形默认缓动两头慢，中间快线性匀速添加"linear"参数终点样式参数JSON格式定义元素最终状态动画总时长以毫秒为单位，控制动画持续时间4.2.2哪些属性可以参加animate()动画支持的属性widthheightlefttoprightbottomopacitypaddingmarginborder-radiusfont-size数值型属性不支持的属性background-color背景颜色无法参与动画background-position背景定位无法参与动画text-shadow/box-shadow阴影效果无法参与动画transformrotate/skew/scale无法参与动画解决方案：结合CSS3transition属性实现流畅动画4.2.3回调函数问题演示$("#box").animate({"left":800},1000);$("#box").css("background-color","green");错误代码问题分析animate()是异步函数不会阻塞后续代码执行css()立即执行，背景色瞬间变绿需要回调函数解决解决方案正确代码关键点回调函数作为animate()的第3个参数动画结束后自动执行$(this)表示执行动画的元素盒子运动结束后才变绿$("#box").animate({"left":800},1000,function(){$(this).css("background-color","green");});4.2.4实战案例：豌豆射手动画点击“豌豆射手”就会有“豌豆炮弹”射出，炮弹持续向右运动到屏幕边界外，如图4-5所示。动画机理很简单：当点击“豌豆射手”图片时，就使用jQuery“创建节点”API创建出一个“豌豆炮弹”HTML元素，并使用animate()方法让其实现运动。4.2.4实战案例：豌豆射手动画效果说明1点击豌豆射手图片2动态创建豌豆炮弹元素3豌豆炮弹匀速向右运动4动画结束后删除元素核心技术点动态创建节点animate()方法回调函数线性匀速动画关键代码创建节点$("<div>")匀速运动"linear"参数自动清理remove()删除$("#sheshou").click(function(){//创建豌豆炮弹div盒子var$wandou=$("<divclass='wandou'></div>");

//添加到body中$wandou.appendTo("body");

//进行匀速动画$wandou.animate({left:2000},10000,"linear",function(){//动画结束后删除元素$(this).remove();});});4.3快捷动画方法滑动效果slideDown()下滑展开元素slideUp()上滑隐藏元素淡入淡出fadeIn()淡入显示元素fadeOut()淡出隐藏元素显示隐藏show()平展淡入显示hide()收缩淡出隐藏速度参数说明"fast"200毫秒"normal"400毫秒（默认）"slow"600毫秒注意事项：调用前元素需设置display:none（slideDown/fadeIn）或可见状态（slideUp/fadeOut）4.3.4实战案例：水平菜单效果说明鼠标触碰栏目块，菜单动画展开；鼠标离开，菜单动画收起关键技术点1初始隐藏菜单设置display:none2滑动动画slideDown()展开/slideUp()收起3防止积累stop()停止旧动画再执行新动画4解决间隙多套一层盒子消除元素间隙核心代码事件监听mouseentermouseleave连续打点stop()slideDown()子元素children()方法//鼠标触碰li$(".navli").mouseenter(function(){//碰到的li的子元素.dropbox展开$(this).children(".dropbox").stop().slideDown();});//鼠标离开li$(".navli").mouseleave(function(){//碰到的li的子元素.dropbox收缩$(this).children(".dropbox").stop().slideUp();});4.4.1多段动画的实现同一元素→排队执行多个animate()方法会自动排队，按顺序执行$("#box").animate({"left":1000},1000);$("#box").animate({"top":400},1000);$("#box").animate({"left":0},1000);$("#box").animate({"top":0},1000);不同元素→同时执行不同元素的动画会同时开始，并行执行$("#box1").animate({"margin-left":1000},1000);$("#box2").animate({"margin-left":1000},1000);$("#box3").animate({"margin-left":1000},1000);链式调用（推荐写法）$("#box").animate({"left":1000},1000).animate({"top":400},1000).animate({"left":0},1000).animate({"top":0},1000);动画顺序盒子将按顺序运动：左→下→右→上总时长4段动画×1秒=总共4秒避免回调黑洞不要嵌套回调函数，代码难以维护4.4.2动画的停止和延迟stop()方法1停止当前动画立即中断元素正在执行的动画2防止动画积累避免频繁触发导致的动画混乱3连续打点语法与动画方法链式调用delay()方法1设置延迟时间延迟指定毫秒后执行动画2替代回调黑洞优雅实现不同元素排队动画3精确计算延迟根据前一个动画时长设置应用场景：stop()用于菜单动画、hover效果防止积累；delay()用于PPT动画、轮播图等需要精确控制时序的场景//常见用法$(this).stop().slideDown();$(this).stop().fadeOut();$(this).stop().animate({"left":500},1000);$("#box1").animate({},1000);$("#box2").delay(1000).animate({},1000);$("#box3").delay(2000).animate({},1000);$("#box4").delay(3000).animate({},1000);4.4.3实战案例：PPT动画效果说明多个元素依次闪烁出现，模拟PPT入场效果依次延迟每个元素延迟递增，形成顺序动画闪烁效果淡入→淡出→再淡入，共2次闪烁首尾衔接精确计算延迟时间，动画流畅衔接核心代码delay(i*600)延迟递增fadeIn(200)淡入动画fadeOut(200)淡出动画技术要点each()遍历简化循环代码精确延迟下标×间隔时间链式调用连续打点语法时间计算总时长=动画数×单个时长//遍历每一个img标签$(".bannerimg").each(function(i){//i就是img标签的下标$(this).delay(i*600).fadeIn(200).fadeOut(200).fadeIn(200);});4.5.1CSS3transition过渡属性基本语法1过渡属性指定参与过渡的CSS属性名，或使用all2过渡时长完成过渡效果需要的时间（秒），必须带单位s3速度曲线linear表示匀速，省略则为"两头慢中间快"4延迟时间过渡动画开始前的延迟时间，立即开始设为0s代码示例效果说明鼠标触碰盒子时，宽度和背景颜色都会平滑过渡变化浏览器兼容性从IE10开始兼容，现代浏览器广泛支持性能优势GPU加速，动画流畅细腻不卡顿支持属性几乎所有数值型属性，包括颜色和变形transition:width1slinear0s;.box{width:200px;height:200px;background-color:#1284BA;transition:all2slinear0s;}.box:hover{width:800px;background-color:#FF862F;}4.5.3jQuery结合transition属性实现动画策略说明CSS设置transition在CSS中定义过渡属性和时长jQuery改变样式使用css()方法动态改变属性值自动触发动画样式改变时自动产生平滑过渡效果代码示例/*CSS代码*///jQuery代码优势动画更加流畅细腻支持更多CSS属性（background-color、transform等）性能更好，GPU加速缺点动画时长定义在CSS中，影响编程连贯性css()方法没有回调函数难以处理动画结束后的逻辑#box{transition:all5slinear0s;}$("button").click(function(){$("#box").css({"left":800,"top":300,"background-color":"green"});});4.5.5实战案例：抽奖转盘效果说明点击指针用户点击转盘中心的指针随机旋转轮盘旋转10000~15000度随机角度平滑停止20秒平滑过渡后停止在随机位置关键技术transition:all20sMath.random()transform:rotate()css()方法核心代码//CSS样式#lunpan{transition:all20s;}//jQuery代码$("#zhizhen").click(function(){//随机生成10000~15000的数字varn=Math.random()*5000+10000;//设置轮盘旋转$("#lunpan").css("transform","rotate("+n+"deg)");});4.6实战案例：熊猫展示卡片效果说明鼠标触碰图片抽屉展开显示详情平滑过渡动画效果精确数学计算位置和尺寸尺寸变化规则默认状态120px×130px间隔触碰盒子400px宽其他盒子50px宽left值计算触碰盒子左侧：序号×60触碰盒子右侧：(序号-1)×60+410核心代码//jQuery代码$(".boxulli").mouseenter(function(){varn=$(this).index();

//触碰盒子宽度400px，left值n×60$(this).css({width:400,left:n*60});

//左侧盒子：序号×60，宽度50px$(".boxulli:lt("+n+")").each(function(){$(this).css({left:$(this).index()*60,width:50});});

//右侧盒子：(序号-1)×60+410，宽度50px$(".boxulli:gt("+n+")").each(function(){$(this).css({left:($(this).index()-1)*60+410,width:50});});