第10章 jQuery制作动画
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版 面。if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$$vv__sshhooww.a.annimimaattee(({{lelefftt::'0'-p=x''+},v"_swloidwt"h)*; (/p/通ag过e_改c变oulenftt-值1)，}跳, "转slo到w第")一; 个版面
动画控制
（5）动画回调函数
动画执行完毕后执行的函数。 单击按钮，将div宽度设置为150px后，为div添加边框。
$("button").click(function(){ $("div"). animate({width:'150px'}，'slow'， function(){ $("div").css("border"，"5px solid orange"); });
（2）累加、累减动画
• 每单击一次“累加动画”按钮，把<div>元素移至距左边100像素的位置。 • $(“#btn2”).click(function(){ • $(“.divStyle”).animate({left:”+=100px”},”fast”);})
动画控制
（3）同时执行多个动画
• 每单击一次“执行多个动画”，<div>元素往左移动100px、高度增加50px。 • $("#btn3").click(function(){ • $(“.divStyle”).animate({left:”+=100px”,height:”+=50px”},”fast”); })
Baidu Nhomakorabea
$(this).next().fadeToggle('slow')
$(this).next().slideToggle('slow')
练一练
练习 根据所给素材，实现Tab切换效果。用户移入选项卡时，当前选项卡添加样式，如图
所示，其他选项卡不添加该样式，同时该选项卡的内容淡入显示。
练一练
实现思路
（1）.设置选项卡样式，为4个选项卡依次设置.jQuery、.Vue、.Reat和.Node样式， 第1个选项卡显示，其他三个选项卡隐藏。 （2）. 选项卡应用buttons样式，当前显示的选项卡应用buttonHover。页面加载时 第1个选项卡应用buttonHover样式。 （3）. 定义选项卡切换函数，可以定义两个参数，其中一个参数是容器，一个参数 是要显示文字的选项卡，函数调用时传递相应参数。 （4）. 函数调用。
ppaaggee+--+; ; }} }
练一练
练习 根据所给素材实现图片横向轮播效果，如图所示。
实现思路
（1）获取需要轮播的图片和展示的div。 （2）使用animate设置left值，每次移动宽度为展示div的宽度。 （3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。
练一练
练习 将上题横向移动改为纵向移动，如图所示。
} else{
$dt.show(300); } })
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt. fadeOut("slow");
} else{
$dt. fadeIn("fast"); } })
判断元素是否处于动画状态
if(!$(element).is(“:animated”)){
//如果当前没有进行动画，则添加新动画……}
任务实现
关键代码
iiff(( !!$$vv__sshhooww..iiss((""::aanniimmaatteedd"")) &&&& $$((tthhiiss)).. hhaassCCllaassss((""pnerexvt"")))){{ ////判判断断““视视频频内内容容展展示示区区域域”” 是是否否正正在在处处于于动动画画
ppaaggee==1p; age_count; }}eellssee{{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每 次换一个$版v面_show.animate({ left : '+='+v_width }, "slow");
可选。show()方法执行完之后，要执行的方法。 除非设置了speed参数，否则不能设置该参数。
任务实现
关键代码
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt.hide("slow");
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt. slideUp("fast");
} else{
$dt. slideDown("normal"); } })
$(this).next().toggle('slow');
1.理解图片轮播原理 2.掌握自定义动画animate方法的应用
图片轮播原理
大家知道生活中的电影是怎么播放的吗？
原理 点拨
类似生活中的电影播放 所有图片就是电影中的“胶卷“ 展示的图片就是电影中的”画面“
图片轮播原理
自定义动画animate
自定义 动画语法
• animate(params,speed,fun);
实现思路
（1）注意分析CSS样式，轮播的图片在高度大小要远大小展示div的高度。 （2）使用animate设置top值，每次移动高度为展示div的高度。 （3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。
演示任务1：FAQ答案的显示和隐藏
任务分析
1.为每一个“问题”绑定鼠标单击事件。 2.获取每一个“问题”相对应的“答案”。 3.为每一个“答案”添加显示与隐藏的不同动画。单击第1个问题，其答案 显示和隐藏的动画是高度、宽度和透明度的同时变化；单击第2个问题，其 答案显示和隐藏的动画是淡入淡出，即只有透明度的变化；单击第3个问题， 其答案显示和隐藏的动画是上下滑动效果，即只有高度的变化。
01 掌握显示与隐藏的相关动画方法 02 理解图片轮播原理 03 掌握animate方法、理解动画队列 04 能解决动画效果与用户操作不一致问题
本章任务
任务1：FAQ答案的显示和隐藏 任务2：图片横向移动效果
任务描述
页面加载时问题答案隐藏，当用户问题时，每个问题的答案以不同的动画 方法显示和隐藏答案，分别是显示隐藏、淡入/淡出和上下滑动，当用户再 次单击问题时，答案隐藏。
fadeToggle() “normal”:400
slow”:600
FAQ答案的显示和隐藏
• show()方法的语法结构：$(selector).show(speed,callback);
参数 speed
callback
描述 可选。规定元素从隐藏到完全可见的速度。默认为"0"。 可取的值： 毫秒（比如1500） "slow"（为600毫秒） "normal"（为400毫秒） "fast"（为200毫秒） 在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度 、宽度、外边距、内边距和透明度。如果没有设置速度，元素会直接显示。
• params为属性值，speed为速度，fun为回调函数 • 可操作大部分样式属性，但部分属性除外，比如背景
动画控制
（1）简单动画
• 单击“开始动画”,把<div>元素移至距左边250像素的位置，即left等于 250px。 • $("#btn1").click(function(){ • $(".divStyle").animate({left:'250px’}, 2000);});
练一练
练习 根据所给素材，鼠标移入菜单项，二级菜单以改变高度动画显示出来，鼠标移出菜单
项时，二级菜单以改变高度动画隐藏。
实现思路
（1）可为菜单项绑定hover事件。 （2）二级菜单动画使用sildeUp()和slideDown()实现。
任务描述
图片横向移动效果，共4个版面。左右箭头可控制图片的左右滚动。当展示 内容已经是最后一个版面时，如果再向后，就显示第一个版面。当展示内 容已经是第一个版面时，如果再向前，就显示最后一个版面。左上角箭头 旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。
解决光标效果与用户操作不一致问题
$('.mainlevel').hover(function(){ $(this).find('ul').stop(true,true).slideDown(500); },function(){ $(this).find('ul').stop(true,true).slideUp("fast"); })
掌握jQuery中的显示隐藏动画方法
相关动画方法
控制显示和隐藏
显示：show() 隐藏：hide() toggle()
“fast”:200
控制不透明度
控制高度
淡入：fadeIn()
上滑：slideUp()
淡出：fadeout()
下滑：slideDown()
透明至：fadeTo()
slideUpToggle()
（4）顺序执行多个动画
• 每单击一次“动画队列”，<div>元素先往左移动100px，后高度增加50px。
• $(“#btn4”).click(function(){
• $(“.divStyle”).animate({left:”+=100px”},”fast”)
•
.animate({height:”+=50px”},”fast”); 动画顺序执行 称为“动画队列”
});
思考
在二级菜单显示隐藏这个案例中，如果用户操作过快，导致光标效 果与用户操作不一致，怎么办？
stop方法 停止前面动画
停止动画
语法： stop([clearQueue],[gotoEnd])（参数为可选，为布尔值）
01
02
第一个参数
是否清空未执行完的动画队列
第二个参数
是否直接将正在执行的那个动画跳转到末状态
演示任务2：图片横向移动效果
任务分析
1.通过jQuery选择器获取“左右箭头”，为其绑定click事件。 2.获取要控制的“图片内容所在的div元素”（class属性为“v_content_list”） 和“图片展示区域的div元素”（class属性为“v_content”）的宽度。 3.使用自定义动画控制“图片内容所在的div元素”的left属性值来改变其水平位 置，以一个版面的宽度为单位进行变化。 4.当前版面对应蓝色圆点添加current样式，其他圆点移除该样式。
$$vv__sshhooww.a.annimimaattee(({{lelefftt::'0'-p=x''+},v"_swloidwt"h)*; (/p/通ag过e_改c变oulenftt-值1)，}跳, "转slo到w第")一; 个版面
动画控制
（5）动画回调函数
动画执行完毕后执行的函数。 单击按钮，将div宽度设置为150px后，为div添加边框。
$("button").click(function(){ $("div"). animate({width:'150px'}，'slow'， function(){ $("div").css("border"，"5px solid orange"); });
（2）累加、累减动画
• 每单击一次“累加动画”按钮，把<div>元素移至距左边100像素的位置。 • $(“#btn2”).click(function(){ • $(“.divStyle”).animate({left:”+=100px”},”fast”);})
动画控制
（3）同时执行多个动画
• 每单击一次“执行多个动画”，<div>元素往左移动100px、高度增加50px。 • $("#btn3").click(function(){ • $(“.divStyle”).animate({left:”+=100px”,height:”+=50px”},”fast”); })
Baidu Nhomakorabea
$(this).next().fadeToggle('slow')
$(this).next().slideToggle('slow')
练一练
练习 根据所给素材，实现Tab切换效果。用户移入选项卡时，当前选项卡添加样式，如图
所示，其他选项卡不添加该样式，同时该选项卡的内容淡入显示。
练一练
实现思路
（1）.设置选项卡样式，为4个选项卡依次设置.jQuery、.Vue、.Reat和.Node样式， 第1个选项卡显示，其他三个选项卡隐藏。 （2）. 选项卡应用buttons样式，当前显示的选项卡应用buttonHover。页面加载时 第1个选项卡应用buttonHover样式。 （3）. 定义选项卡切换函数，可以定义两个参数，其中一个参数是容器，一个参数 是要显示文字的选项卡，函数调用时传递相应参数。 （4）. 函数调用。
ppaaggee+--+; ; }} }
练一练
练习 根据所给素材实现图片横向轮播效果，如图所示。
实现思路
（1）获取需要轮播的图片和展示的div。 （2）使用animate设置left值，每次移动宽度为展示div的宽度。 （3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。
练一练
练习 将上题横向移动改为纵向移动，如图所示。
} else{
$dt.show(300); } })
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt. fadeOut("slow");
} else{
$dt. fadeIn("fast"); } })
判断元素是否处于动画状态
if(!$(element).is(“:animated”)){
//如果当前没有进行动画，则添加新动画……}
任务实现
关键代码
iiff(( !!$$vv__sshhooww..iiss((""::aanniimmaatteedd"")) &&&& $$((tthhiiss)).. hhaassCCllaassss((""pnerexvt"")))){{ ////判判断断““视视频频内内容容展展示示区区域域”” 是是否否正正在在处处于于动动画画
ppaaggee==1p; age_count; }}eellssee{{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每 次换一个$版v面_show.animate({ left : '+='+v_width }, "slow");
可选。show()方法执行完之后，要执行的方法。 除非设置了speed参数，否则不能设置该参数。
任务实现
关键代码
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt.hide("slow");
$("dl dt:first").click(function(){ var $dt=$(this).next();
if($dt.is(":visible")){ $dt. slideUp("fast");
} else{
$dt. slideDown("normal"); } })
$(this).next().toggle('slow');
1.理解图片轮播原理 2.掌握自定义动画animate方法的应用
图片轮播原理
大家知道生活中的电影是怎么播放的吗？
原理 点拨
类似生活中的电影播放 所有图片就是电影中的“胶卷“ 展示的图片就是电影中的”画面“
图片轮播原理
自定义动画animate
自定义 动画语法
• animate(params,speed,fun);
实现思路
（1）注意分析CSS样式，轮播的图片在高度大小要远大小展示div的高度。 （2）使用animate设置top值，每次移动高度为展示div的高度。 （3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。
演示任务1：FAQ答案的显示和隐藏
任务分析
1.为每一个“问题”绑定鼠标单击事件。 2.获取每一个“问题”相对应的“答案”。 3.为每一个“答案”添加显示与隐藏的不同动画。单击第1个问题，其答案 显示和隐藏的动画是高度、宽度和透明度的同时变化；单击第2个问题，其 答案显示和隐藏的动画是淡入淡出，即只有透明度的变化；单击第3个问题， 其答案显示和隐藏的动画是上下滑动效果，即只有高度的变化。
01 掌握显示与隐藏的相关动画方法 02 理解图片轮播原理 03 掌握animate方法、理解动画队列 04 能解决动画效果与用户操作不一致问题
本章任务
任务1：FAQ答案的显示和隐藏 任务2：图片横向移动效果
任务描述
页面加载时问题答案隐藏，当用户问题时，每个问题的答案以不同的动画 方法显示和隐藏答案，分别是显示隐藏、淡入/淡出和上下滑动，当用户再 次单击问题时，答案隐藏。
fadeToggle() “normal”:400
slow”:600
FAQ答案的显示和隐藏
• show()方法的语法结构：$(selector).show(speed,callback);
参数 speed
callback
描述 可选。规定元素从隐藏到完全可见的速度。默认为"0"。 可取的值： 毫秒（比如1500） "slow"（为600毫秒） "normal"（为400毫秒） "fast"（为200毫秒） 在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度 、宽度、外边距、内边距和透明度。如果没有设置速度，元素会直接显示。
• params为属性值，speed为速度，fun为回调函数 • 可操作大部分样式属性，但部分属性除外，比如背景
动画控制
（1）简单动画
• 单击“开始动画”,把<div>元素移至距左边250像素的位置，即left等于 250px。 • $("#btn1").click(function(){ • $(".divStyle").animate({left:'250px’}, 2000);});
练一练
练习 根据所给素材，鼠标移入菜单项，二级菜单以改变高度动画显示出来，鼠标移出菜单
项时，二级菜单以改变高度动画隐藏。
实现思路
（1）可为菜单项绑定hover事件。 （2）二级菜单动画使用sildeUp()和slideDown()实现。
任务描述
图片横向移动效果，共4个版面。左右箭头可控制图片的左右滚动。当展示 内容已经是最后一个版面时，如果再向后，就显示第一个版面。当展示内 容已经是第一个版面时，如果再向前，就显示最后一个版面。左上角箭头 旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。
解决光标效果与用户操作不一致问题
$('.mainlevel').hover(function(){ $(this).find('ul').stop(true,true).slideDown(500); },function(){ $(this).find('ul').stop(true,true).slideUp("fast"); })
掌握jQuery中的显示隐藏动画方法
相关动画方法
控制显示和隐藏
显示：show() 隐藏：hide() toggle()
“fast”:200
控制不透明度
控制高度
淡入：fadeIn()
上滑：slideUp()
淡出：fadeout()
下滑：slideDown()
透明至：fadeTo()
slideUpToggle()
（4）顺序执行多个动画
• 每单击一次“动画队列”，<div>元素先往左移动100px，后高度增加50px。
• $(“#btn4”).click(function(){
• $(“.divStyle”).animate({left:”+=100px”},”fast”)
•
.animate({height:”+=50px”},”fast”); 动画顺序执行 称为“动画队列”
});
思考
在二级菜单显示隐藏这个案例中，如果用户操作过快，导致光标效 果与用户操作不一致，怎么办？
stop方法 停止前面动画
停止动画
语法： stop([clearQueue],[gotoEnd])（参数为可选，为布尔值）
01
02
第一个参数
是否清空未执行完的动画队列
第二个参数
是否直接将正在执行的那个动画跳转到末状态
演示任务2：图片横向移动效果
任务分析
1.通过jQuery选择器获取“左右箭头”，为其绑定click事件。 2.获取要控制的“图片内容所在的div元素”（class属性为“v_content_list”） 和“图片展示区域的div元素”（class属性为“v_content”）的宽度。 3.使用自定义动画控制“图片内容所在的div元素”的left属性值来改变其水平位 置，以一个版面的宽度为单位进行变化。 4.当前版面对应蓝色圆点添加current样式，其他圆点移除该样式。