第五章 jQuery框架动画特效
5.1 jQuery动画特效说明
jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQuery框架还支持自定义各种动画效果。
jQuery中的动画效果主要有以下方法
① 显示和隐藏动画
② 展开和收起动画
③ 淡入和淡出动画
④ 自定义动画效果
5.2 显示和隐藏动画
jQuery框架中为我们提供了专门的方法来控制让标签显示或者是隐藏。标签的显示和隐藏在开发中相对来说是比较常见的操作,如果使用原生的JavaScript代码来控制标签的显示或者是隐藏,那么我们主要通过控制该标签的display属性值来实现。
jQuery中控制标签显示和隐藏的动画方法
① show()
控制让标签显示的动画方法
② hide()
控制让标签隐藏的动画方法③ toggle()
控制让标签显示|隐藏效果切换的动画方法 ex:以原生的方法来控制标签的显示或隐藏
1 2 3 4 5 12 13 14 15 16 24 25
显示和隐藏动画方法语法
$("selector").show(speed,callBack)
$("selector").hide(speed,callBack)
参数说明:
第一个参数:可选的参数。speed表示执行动画的速度,该速度可以使用系统默认提供的值,也可以自己以数字的形式传入。
系统默认提供的值有:“slow”、“normal”、“fast”,对应的速度分别为0.6秒、0.4秒和0.2秒。
自己以数字的形式传递则:传递如1000|3000类似的值,单位为毫秒,如果传递1000表示动画的执行速度为1秒。
第二个参数:可选的参数。callBack为动画完成时执行的回调函数,该函数每个元素执行一次。
切换动画方法语法
调用方式[1] => $("selector").toggle()
调用方式[2] => $("selector").toggle(speed,callBack)
方法参数说明:
(1)调用方式[1],不传递参数。切换当前元素(标签)的可见状态,如果当前元素的状态为不可见,则切换为可见,如果当前元素的状态为可见,则切换为不可见。
(2)调用方式[2],第一个可选的参数为动画执行的速度,第二个可选的参数为动画执行完后执行的回调函数。
总结
show方法和hide方法用来控制标签的显示或者是隐藏,内部的实现逻辑是同时改变标签的宽度、高度和透明度
。
5.3 展开和收起动画
jQuery框架中,为我们提供实现滑动效果的方法,slideDown和slideUp方法分别可以用来控制标签展开和收起。
展开和收起动画方法语法
slideDown(speed,callBack);
slideUp(speed,callBack)
slideToggle(speed,callBack)
方法解释
slideDown
方法的功能是设置让指定标签的高度从顶部向底部增加,以呈现出一种展开的动画效果,元素的其他属性不会发生任何变化。
sldeUp
方法的功能是设置让指定标签的高度从底部向顶部减小,仅仅改变标签的高度,其他的属性并不会改变。
slideToggle
方法用来切换所选择元素的高度,如果当前标签的高度不为0,那么调用该方法后就会把标签的高度过渡为0,实现收起的效果,否则就实现展开的效果。
注意:无论是展开还是收起的动画方法,他们的动画效果都仅仅只会改变(增加或减小)标签的高度。
参数说明
第一个参数:动画执行的时间,同show方法。
第二个参数:动画执行完毕的回调函数,可以省略,同show方法。代码示例
1 2我是div3 4 5 6 23
5.4 淡入和淡出动画
jQuery框架中还提供了淡入和淡出的动画方法,这两个方法分别是fadeIn和fadeOut。
淡入和淡出动画方法语法
fadeIn(speed,callBack);
fadeOut(speed,callBack)
fadeToggle(speed,callBack)
fadeTo(speed,opactity,callBack)
方法说明:
淡入淡出方法的内部实现原理是控制标签的透明度,通过改变选中标签的透明度来实现淡入和淡出的动画效果,并不修改其他的属性。
fadeIn()方法
的作用是淡入动画,即改变标签的透明度让标签慢慢的显示出来。
fadeOut()方法
的作用是淡出动画,即改变标签的透明度让标签慢慢的消失(透明度为0)。
fadeToggle()方法
的作用是切换动画,如果当前标签的透明度不为0,那么就执行淡出动画,否则就执行淡入动画。
fadeTo()方法
的作用是淡入到,即使用动画效果实现将标签的透明度设置为指定的值。
备注
:标签透明度的取值范围为0.0~1.0。
参数说明:
speed参数:动画执行的速度,单位为毫秒。
callBack参数:动画执行完毕的回调函数,可选。opacity参数:指定的标签透明度(0.0~1.0)。代码示例
1 2 3 4 5Title 6 7 14 15 16我是div17 18 19 20 21 54 55
5.5 自定义动画
jQuery框架中本身已经为我们封装好了一些简单的控制标签宽高、透明度相关的方法,如显示和隐藏、展开和收起、淡入和淡出,除了这些方法之外,jQuery还为我们提供了animate()方法
,允许我们自定义动画效果,通过一些设置我们可以实现更加复杂的动画效果,
自定义动画的语法
animate(params,speed,easing,callBack)
参数说明:
第一个参数:params是一个对象。在该对象中以键值对的方式来要控制的属性样式和对应的值表示。第二个参数:speed速度,可以是默认字符串中的某个(“slow” “normal” “fast”)或者是自定义的数字。
第三个参数:easing为动画插件使用的可选参数,用来控制动画的表现效果,通常有linear和swing等固定值。
第四个参数:动画执行完毕后的回调函数。
代码示例
1 2 3 4 5Title 6 13 14 15 21我是个好人22 25 28 29 58 59
动画队列、动画停止和动画延迟
动画队列:
如果某个标签身上要调用多个动画相关方法,即需要展示多个动画效果,那么所有的这些动画效果并不会同一时刻发生,而是需要在队列中排队,然后按照队列中动画效果的顺序依次展现。
动画停止:
在执行动画的时候,可以通过stop()方法来停止动画。停止动画的语法为:
stop(clearQueue,gotoEnd)
方法和参数说明:
stop方法的功能是停止指定标签中正在执行的动画,其中第一个参数clearQueue为可选参数,传递一个布尔类型的值,表示是否停止正在执行的动画。第二个参数gotoEnd也是可选参数,传递一个布尔类型的值,表示是否立即完成正在执行的动画。
动画延迟:
设置一个延时的值来推迟后续队列中动画的执行,可以传递延迟的具体时间,单位为毫秒。
代码示例01
1 2 3 4 5Title 6 13 14 151617 18 19 38 39
代码示例02
1 2 3 4 5Title 6 13 14 151617 18 19 56 57
- Posted by 博客园· ~
- 联系作者 简书· 新浪微博·
- 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 |