第14章 jquery的动画效果.pptVIP

第14章 jQuery的动画效果 在网页中嵌入动画已成为近来网页设计的一种趋势，而程序开发人员一般都比较头痛实现页面中的动画效果，但是利用jQuery中提供的动画方法，能够轻松地为网页添加精彩的视觉效果，瞬间成为动画高手。 隐藏元素的hide()方法 hide()方法是jQuery中最基本的动画方法，在HTML页面中，为一个元素调用hide()方法，相当于调用css()方法将元素的display属性的值设置为“none”。该方法的基本语法格式如下： $(selector).hide(speed,callback) 该方法中的两个参数都是可选的，参数speed表示元素从可见到隐藏的速度。其默认为 “0”，可选值为“slow”、“normal”、“fast”和代表毫秒的整数值。在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。参数callback表示hide()函数执行完之后，要执行的函数。 显示元素的show()方法 show()方法的功能与hide()方法正好相反，其功能是如果被选元素已被隐藏，则显示这些元素。其基本语法格式如下： $(selector).show(speed,callback) 其参数的含义与hide()方法中参数的含义完全相同。 交替显示隐藏元素 jQuery中提供的toggle()方法可以实现交替显示和隐藏元素的功能，即自动切换hide()和show()方法。该方法将检查每个元素是否可见。如果元素已隐藏，则运行 show()方法。如果元素可见，则运行hide()方法，从而实现交替显示隐藏元素的效果。该方法的基本语法格式如下： $(selector).toggle(speed,callback) 其参数的含义与hide()方法中参数的含义完全相同。 向上收缩效果 jQuery中的slideUp()方法用于向上滑动元素，从而实现向上收缩效果。该方法实际上是改变元素的高度，如果页面中的一个元素的display属性值为“none”，则当调用slideUp()方法时，元素将由下到上缩短显示。 slideUp()方法的基本语法格式如下： $(selector).slideUp(speed,callback) 其参数的含义与hide()方法中参数的含义完全相同。 向下展开效果 jQuery中提供了slideDown()方法用于向下滑动元素，该方法通过使用滑动效果，将逐渐显示隐藏的被选元素。该方法实现的效果适用于通过jQuery隐藏的元素，或在CSS中声明“display:none”的元素。该方法的基本语法格式如下： $(selector).slideDown(speed,callback) 其参数的含义与slideUp()方法中参数的含义完全相同。 交替伸缩效果 jQuery中的slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。该方法的基本语法格式如下： $(selector).slideToggle(speed,callback) 其参数的含义与slideUp()方法中参数的含义完全相同。 淡入效果 fadeIn()方法用于淡入显示已隐藏的元素。与show()方法不同的是，fadeIn()方法只是改变元素的不透明度，该方法会在指定的时间内提高元素的不透明度，直到元素完全显示。 fadeIn()方法的基本语法格式如下： $(selector).fadeIn(speed,callback) 其中，参数speed是可选的，用来设置效果的时长。其取值可以为“slow”、“fast”或表示毫秒的整数。参数callback也是可选的，表示淡入效果完成后所执行的函数名称。 淡出效果 jQuery中的fadeOut()方法用于淡出可见元素。该方法与fadeIn()方法相反，会在指定的时间内降低元素的不透明度，直到元素完全消失。 fadeOut()方法的基本语法格式如下： $(selector).fadeOut(speed,callback) 其参数的含义与fadeIn()方法中参数的含义完全相同。 交替淡入淡出效果 jQuery中的fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果。 fadeToggle()方法的基本语法格式如下： $(selector).fadeToggle(speed,callback) 其参数的含义与fadeIn()方法中参数的含义完全相同。 不透明效果 fadeTo()方法可以把元素的不