jQuery网页特效任务驱动式教程-实现动画效果.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/5/3,#,JavaScript,高级编程,任务,5,实现动画效果,任务,5,实现动画效果,任务,5.1,使用,css(),制作动画,任务,5.2,显隐动画制作,任务,5.3,淡入淡出动画,任务,5.4,上卷下拉实现折叠框动画,任务,5.5,上卷下拉实现百叶窗动画,任务,5.6,阶梯式的上卷下拉动画,任务,5.7 animate(),动画,使用,css(),方法实现文本动画效果,任务描述,页面中有三个段落，内容任意，段落内容使用默认样式效果，当,鼠标指向,段落时，将段落背景改为黄色，文本改为红色，,鼠标离开,段落时，将背景改为白色，文本改为蓝色；,鼠标单击,段落时，段落字号放大为原来的,1.2,倍效果说明,第一个段落为鼠标指向,第二个段落为鼠标指向又离开,第三个段落为默认样式,使用,css(),方法实现文本动画效果,功能实现,任务中是对段落进行的鼠标操作，指向与离开可以使用,mouseover,和,mouseout,或者,mouseenter,和,mouseleave,，此处效果等同，也可以使用,jQuery,中的,hover(),事件方法实现,实现字号放大为原来的,1.2,倍时，对样式属性,font-size,的取值需要使用函数设置，函数返回值为当前字号乘以,1.2,jQuery,中的,hover(),方法,格式：,$(selector).hover(handlerIn,handlerOut),hover(),方法用于模拟鼠标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数，当鼠标移出这个元素时，会触发指定的第二个函数注意：,hover(),方法触发的是鼠标事件,mouseenter,和,mouseleave,，而不是,mouseover,和,mouseout,任务,5,实现动画效果,任务,5.1,使用,css(),制作动画,任务,5.2,显隐动画制作,任务,5.3,淡入淡出动画,任务,5.4,上卷下拉实现折叠框动画,任务,5.5,上卷下拉实现百叶窗动画,任务,5.6,阶梯式的上卷下拉动画,任务,5.7 animate(),动画,使用显隐动画模拟文件夹的树形列表结构,任务描述,上图页面中有两个文件夹名称“任务,1 jQuery,基础知识”和“任务,2,实现级联菜单功能”，文件夹左侧的向右箭头符号表示将文件夹折叠起来的效果，单击文件夹，将折叠部分展开之后的运行效果如右图所示,使用显隐动画模拟文件夹的树形列表结构,元素结构,页面使用嵌套,ul,列表完成文件夹的树形列表结构设计只要是并列的项，一定是属于同一个,ul,的,li,，只要是作为文件夹的项，一定是在,li,中嵌套了,ul,结构一共使用了,4,层嵌套的,ul,结构,任务,1,文件夹内部只有文件，没有子文件夹,任务,2,文件夹内有两层子文件夹和文件,使用显隐动画模拟文件夹的树形列表结构,任务实现,初始状态，使用,jQuery,代码将,所有包含,ul,子元素的列表项,li,（,$(li).has(ul),）,鼠标指针设置为手状，列表符号图片为表示折叠状态的,向右箭头,，子元素,ul,都是隐藏的。

对所有不包含,ul,子元素的列表项,li,，设置鼠标默认，列表符号为,none,单击包含,ul,子元素的列表项,li,时，判断当前单击操作的是否是该元素自身（,if(this=event.target),）,，这是,因为在单击子元素触发,click,事件时，会同时触发父元素的,click,事件（事件的冒泡）,，所以此处必须要进行判断处理若是，则根据其子元素的显示隐藏状态（,is(:hidden),）更改其样式效果和子元素的隐藏显示效果；若单击的是子元素，则不做任何操作使用显隐动画模拟文件夹的树形列表结构,显隐动画,显示隐藏的元素,show(speed,easing,回调函数,),speed,：可选设置动画变化过程持续的时间，取值可以是“,slow|normal|fast|,毫秒”，其中,slow,表示,600,毫秒，,normal,表示,400,毫秒，,fast,表示,200,毫秒，也可以自行定义动画持续的毫秒数如果没有定义该参数，则元素会由隐藏状态直接变为显示状态，也就是没有完成修改的动画过程；如果定义了该参数，则元素的,宽度、高度、透明度、外边距和内填充,等样式属性，会在指定的时间内逐渐变化到完整显示,easing,：可选。

规定在动画的不同点上元素的速度默认值为,“swing”,，表示在开头和结尾移动慢，在中间移动快；,linear,表示匀速移动回调函数，表示在动画完成时要执行的函数，函数内部定义动画完成之后要执行的功能，该参数可以省略显隐动画,隐藏显示的元素,hide(speed,easing,回调函数,),宽度、高度、透明度、外边距和内填充,在指定时间内逐渐变化到完全隐藏，隐藏后不占据空间,与,hide(),方法匹配的是元素的,display:none,;,显示与隐藏切换,toggle(speed,easing,回调函数,),实现简单的显示与隐藏动画,功能说明,使用循环结构在页面中添加,5,个,div,，,div,的样式要求为宽度,100,像素，高度,100,像素，背景绿色，边距,2,像素，行内块布局，内容为序号,1,、,2,、,3,、,4,、,5,，内容在水平和垂直方向都居中；,动画效果要求为：单击第,2,到第,5,个,div,时，完成自身的隐藏，单击第,1,个,div,时完成后面,4,个,div,的显示有动画效果的显示与隐藏动画,功能说明,页面顶部有,3,个按钮，类名分别是,show,、,hide,和,toggle,，中间有一个,div,，,单击三个按钮时分别显示中间,div,、隐藏中间,div,、在显示和隐藏之间切换中间,div,的显示隐藏状态,，为了方便观察参与动画过程的样式属性，对,div,而言，除了定义其宽度高度之外，还定义了,30,像素的边距和,10,像素的边框，以及位于,div,下方的“盒子下面的内容”，当,div,隐藏之后，该文本与上面的按钮成为上下相邻的关系，用于说明使用,hide(),方法隐藏之后的,div,是不占用空间的。

单击“显示”按钮显示,div,时，动画持续时间为,5,秒钟，单击“隐藏”按钮隐藏,div,时，动画持续时间为,5,秒钟，单击“切换”按钮时，无论显示还是隐藏，动画持续时间都设置为,1,秒钟有动画效果的显示与隐藏动画,页面运行效果及元素结构,应用动画的回调函数,思考问题,如果在单击“显示”按钮显示,div,之后，要修改,div,的边框颜色为红色，能否使用如下代码？为什么？,原因说明：,虽然代码顺序中先使用,show(),，再使用,css(),，但是因为动画的执行需要,5,秒钟完成，所以实际执行时是先执行,css(),，再执行,show(),，也就是先将边框颜色变为红色之后，再执行显示动画应用动画的回调函数,应用动画的回调函数按下面要求修改动画,在显示动画执行完成之后，设置,div,的边框为红色；,在切换动画执行完成之后，弹出消息框显示“动画执行完毕”任务,5,实现动画效果,任务,5.1,使用,css(),制作动画,任务,5.2,显隐动画制作,任务,5.3,淡入淡出动画,任务,5.4,上卷下拉实现折叠框动画,任务,5.5,上卷下拉实现百叶窗动画,任务,5.6,阶梯式的上卷下拉动画,任务,5.7 animate(),动画,淡入淡出的动画函数,fadeIn(),用于淡入已隐藏的元素。

格式：,$(selector).fadeIn(speed,callback),动画执行时，先让隐藏的元素显示出来占据空间，之后逐渐完成,透明度,的变化fadeOut(),用于淡出可见元素，,淡出之后的元素不占据空间,格式：,$(selector).fadeOut(speed,callback),动画执行时，先完成,透明度,的变化过程，之后隐藏元素不占据空间淡入淡出的动画函数,fadeToggle(),可以在,fadeIn(),与,fadeOut(),方法之间进行切换格式：,$(selector).fadeToggle(speed,callback),fadeTo(),允许渐变为给定的不透明度（值介于,0,与,1,之间），将透明度修改为指定值，无论初始状态是显示还是隐藏，都将元素显示出来并修改其透明度格式：,$(selector).fadeTo(speed,opacity,callback),【,注意,】,对同一个动画元素来说，一旦使用该方法修改过透明度，该透明度就成为其他,3,个方法切换透明度时的最大值；使用该方法将透明度变为,0,时，并不隐藏元素淡入淡出动画,任务描述,页面中设计“淡入”“淡出”“到”和“切换”四个按钮和一个背景色为橘色的,div,，单击淡出时，透明度在,3,秒钟内逐渐变为,0,，之后彻底隐藏不占空间；单击淡入时，透明度在,3,秒钟内逐渐变为,1,；单击切换时，在淡入和淡出之间切换；单击“到”时，透明度在,3,秒钟内变化到,0.5,，之后再进行淡入淡出时，透明度最大取值将是,0.5,而不是,1,。

为了观察,div,淡入之后是否占据空间，在,div,下方增加一个段落，内容任意将,$(.box).fadeTo(3000,0.5),中的透明度,0.5,改为,0,，即改为,$(.box).fadeTo(3000,0);,当透明度变为,0,时，,div,是否隐藏？,任务,5,实现动画效果,任务,5.1,使用,css(),制作动画,任务,5.2,显隐动画制作,任务,5.3,淡入淡出动画,任务,5.4,上卷下拉实现折叠框动画,任务,5.5,上卷下拉实现百叶窗动画,任务,5.6,阶梯式的上卷下拉动画,任务,5.7 animate(),动画,上卷下拉动画函数,slideDown(),以逐渐,改变高度（包括,height,、垂直方向填充和垂直方向的边距）的滑动方式,显示隐藏的被选中元素格式：,$(selector).slideDown(speed,callback),slideUp(),以逐渐改变高度的滑动方式隐藏显示的被选中元素格式：,$(selector).slideUp(speed,callback),slideToggle(),可以在,slideDown(),与,slideUp(),方法之间进行切换。

格式：,$(selector).slideToggle(speed,callback),上卷下拉实现折叠框动画,任务描述,左侧是页面初始运行效果,单击“第一章”时向下拉开第一章中,的节标题,再单击“第三章”时，向下拉开第三章中的,节标题，同时将之前展开的第一章的节标题向上卷起收回任务实现,页面内容共包含上下排列的三个独立的块，每个块使用一个,div,实现，,div,内部使用,h1,定义章标题，四个节标题分别使用段落定义之后放在一个,div,内部单击,h1,，设置下一个兄弟元素在上卷下拉之间切换；设置其父元素的兄弟的子元素,div,上卷,上卷下拉实现百叶窗动画,任务描述,百叶窗效果是指垂直方向并列的多个横条,同时下拉展开或者同时上卷收回,的效果页面初始时只显示“观察百叶窗效果”按钮，单击按钮之后，可以展开或者收回百叶窗任务实现,在页面中设计一个,button,按钮“观察百叶窗效果”，页面加载完成之后，使用循环结构生成,10,个,div,，宽,400,，高,40,，边距,20,，背景自定，初始隐藏,单击按钮时设置,div,在上卷和下拉动画之间切换状态，动画时间,5,秒钟任务,5,实现动画效果,任务,5.1,使用,css(),制作动画,任务,5.2,显隐动画制作,任务,5.3,淡入淡出动画,任务,5.4,上卷下拉实现折叠框动画,任务,5.5,上卷下拉实现百叶窗动画,任务,5.6,阶梯式的上卷下拉动画,任务,5.7 animate。