JavaScript+jQuery前端开发基础教程（第2版）（微课版）第11章

JavaScript+jQuery前端开发基础教程微课版第11章jQuery特效

本章主要内容：简单特效透明度特效滑动特效自定义动画动画相关的属性和方法11.1.1隐藏元素hide()方法用于隐藏元素，并可根据参数实现不同的动画效果。1．直接隐藏无参数的hide()方法可直接隐藏元素，没有动画效果。2．控制隐藏的快慢可用字符串“slow”“normal”和“fast”控制动画完成的快慢，这适用于所有特效方法。为hide()方法提供参数后，会以动画的方式完成隐藏。3．设置完成动作的时间jQuery默认动作完成时间为400ms，“fast”为200ms，“normal”为默认的400ms，“slow”为600ms。4．指定完成函数可以为hide()方法指定一个函数，该函数在动作完成时执行，基本格式如下。.

hide(param1,func)参数param1是表示动画快慢的字符串或完成时间。参数func为函数名或者匿名函数。特别说明：几乎所有的jQuery特效方法，均可指定完成函数。11.1.2显示元素show()方法与hide()方法的作用刚好相反，用于将隐藏的元素显示出来。在不指定参数时，show()方法直接显示元素。还可指定完成显示元素的动作快慢、完成时间及完成时回调函数。11.1.3隐藏/显示切换toggle()方法兼具hide()和show()方法的功能，用法类似，可隐藏已显示的元素，或者显示已隐藏的元素。11.2.1淡入效果fadeIn()方法可实现淡入效果，将元素的透明度从100减到0，即从不可见变为可见。11.2.2淡出效果fadeOut()方法可实现淡出效果，将可见元素的透明度从0增加到100，即从可见变为不可见。11.2.3调整透明度fadeTo()方法调整元素的透明度，参数取值范围为[0,1]11.2.4淡入淡出切换fadeToggle()方法用于实现淡入淡出切换，即对可见元素施加淡出效果（fadeOut()），对不可见元素施加淡入效果（fadeIn()）。11.3.1滑入效果slideDown()方法将元素的高度从0增加到实际高度。11.3.2滑出效果slideUp()方法将可见元素的高度从实际高度减少到0。11.3.3滑入滑出切换效果slideToggle()方法对可见元素施加滑出效果，对不可见元素施加滑入效果。10.4自定义动画animate()方法可实现自定义动画，其基本语法格式如下。.animate(

property

[,

duration

]

[,

complete

]

)其中：property为以对象格式表示的CSS属性，如{width:"200",left:"100px"}。duration为动画完成时间（单位为毫秒），或者是表示快慢的字符串（“slow”“normal”或“fast”），complete为动画完成时调用的函数。animate()方法只支持属性值为数字的CSS属性，如width、height、left、opacity等。11.4.1字面量动画在animate()方法中使用字面量设置CSS属性时，jQuery将会把现有的属性值通过动画效果调整为新的值。11.4.2相对量动画相对量动画指使用相对量来设置CSS属性。例如，{width:'+=200'}表示元素宽度在原来的基础上增加200，{width:'-=200'}则表示元素宽度在原来的基础上减少20011.4.3自定义显示或隐藏在使用animate()方法定义动画时，CSS属性可使用“show”“hide”或“toggle”字符串来实现元素的显示或隐藏，类似于show()、hide()或toggle()方法。例如，{width:'toggle'}表示在元素可见时，将其宽度逐渐减为0；元素不可见时，增加其宽度直到为实际宽度。11.4.4位置动画在animate()方法中改变元素的left或top属性，可实现位置动画。实现元素位置动画时，需要将CSSposition属性设置为absolute、relative或fixed。position属性值为static（默认值）时，无法实现元素的移动。11.5.1动画延时delay()方法用于实现延时操作，参数为时间（单位为毫秒）。11.5.2停止动画stop()方法用于停止正在执行的动画，目标对象的CSS属性为动画停止时的状态。11.5.3结束动画finish()方法结束正在执行的动画，目标对象的CSS属性设置为动画正常结束时的状态，即跳过还未完成的动画过程，直接显示结束状态。11.5.4禁止动画效果jQuery.fx.off属性设置为true时，可禁止页面中所有的动画效果，直接将目标对象