深入学习jQuery的三种常见动画效果

1、深入学习jQuery的三种常见动画效果动画效果是jQuery吸引人的地方。通过jQuery的动画方法，能够轻松地为网页添加视觉效果，给用户一种全新的体验。jQuery动画是一个大的系列，本文将详细介绍jQuery的三种常见动画效果显隐效果、高度变化及淡入淡出 显隐在CSS中，总结过实现元素显隐的9种思路。而jQuery中的show()和hide()方法是通过改变display属性来实现元素显隐效果，它们是jQuery中最基本的动画方法【hide()】hide()方法是隐藏元素的最简单方法。如果没有参数，匹配的元素将被立即隐藏，没有动画。这大致相当于调用.css(display, none)di

2、splay属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline复制代码script src=按钮$(#box).click(function(event) $(this).hide(););复制代码hide(duration)当提供一个持续时间参数，hide()就变成了一个动画方法。hide()方法将为匹配元素的宽度、高度及不透明度同时执行动画。一旦透明度达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局持续时间是以毫秒为单位的，数

3、值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: underline; margin-top: 2px; fast normal slow 100 1000恢复$(#reset).click(function() $(#box).show();)$(#con li).click(function() $(#box).hide($(this).html()复制代码hide(duration,easing)hide()方法可以接受一个可选参数easing，表示过渡使用哪

4、种缓动函数。jQuery自身提供linear和swing，其他可以使用相关的插件，其中默认值为swinglinear表示匀速直线运动，而swing则表示变速运动，如下图所示linearswing复制代码script src=litext-decoration: underline; margin-top: 2px; swing linear恢复$(#reset).click(function() $(#box).show();)$(#con li).click(function() $(#box).hide(2000,$(this).html()复制代码hide(duration,easing

5、,callback)hide()方法可以接受第三个参数，该参数也是可选参数，该参数是回调函数，表示动画完成时执行的函数复制代码script src=按钮$(#box).click(function(event) $(this).hide(1000,function() alert(动画完成); $(this).show(); ););复制代码【show()】show()方法用于显示元素，与hide()方法用途正好相反，但用法相似注意如果选择的元素是可见的，这个方法将不会改变任何东西如果没有参数，匹配的元素将被立即显示，没有动画复制代码script src=按钮$(#btn).click(fun

6、ction(event) $(#test).show(););复制代码show(duration)与hide()方法类似，当提供一个持续时间参数，show()就变成了一个动画方法。show()方法将为匹配元素的宽度、高度及不透明度同时执行动画持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: underline; margin-top: 2px; fast normal slow 100 1000恢复$(#box).hide();$(#re

7、set).click(function() $(#box).hide();)$(#con li).click(function() $(#box).show($(this).html()复制代码show(duration,easing)show()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swing复制代码script src=litext-decoration: underline; margin-top: 2px; swing linear恢复$(#box).hide();$(#reset).click(funct

8、ion() $(#box).hide();)$(#con li).click(function() $(#box).show(2000,$(this).html()复制代码show(duration,easing,callback)show()方法可以接受第三个参数，该参数也是可选参数，该参数是回调函数，表示动画完成时执行的函数复制代码script src=按钮$(#btn).click(function(event) $(#box).show(1000,function() alert(动画完成) ););复制代码【toggle()】show()与hide()是一对互斥的方法。需要对元素进行

9、显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle()用于切换显示或隐藏匹配元素如果没有参数，toggle()方法是最简单的方法来切换一个元素可见性通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。如果元素是最初显示，它会被隐藏，如果隐藏的，它会显示出来。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline复制代码script

10、 src=按钮$(#btn).click(function(event) $(#box).toggle(););复制代码toggle(duration)当提供一个持续时间参数，toggle()成为一个动画方法。toggle()方法将为匹配元素的宽度、高度及不透明度，同时进行动画。当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: und

11、erline; margin-top: 2px; fast normal slow 100 1000$(#con li).click(function() $(#box).toggle($(this).html()复制代码toggle(duration,easing)toggle()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swing复制代码script src=litext-decoration: underline; margin-top: 2px; swing linear$(#con li).click(fun

12、ction() $(#box).toggle(2000,$(this).html()复制代码toggle(duration,easing,callback)toggle()方法可以接受第三个参数，该参数也是可选参数，表示回调函数，即动画完成时执行的函数复制代码script src=按钮$(#btn).click(function(event) $(#box).toggle(1000,function() alert(动画完成) ););复制代码高度变化使用show()/hide()实现动画效果时，宽度、高度及透明度会同时变化。若只想让高度发生变化，则需要使用slideUp()方法和slideD

13、own()方法【slideUp()】slideUp()方法将元素由下到上缩短隐藏注意没有参数时，持续时间默认为400毫秒复制代码script src=按钮$(#btn).click(function(event) $(#box).slideUp(););复制代码slideUp(duration)slideUp()方法可以接受一个持续时间参数持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: underline; margin-top: 2p

14、x; fast normal slow 100 1000恢复$(#reset).click(function() $(#box).show();)$(#con li).click(function() $(#box).slideUp($(this).html()复制代码slideUp(duration,easing)slideUp()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swing，其他可以使用相关的插件复制代码script src=litext-decoration: underline; margin-top:

15、 2px; swing linear恢复$(#reset).click(function() $(#box).show();)$(#con li).click(function() $(#box).slideUp(2000,$(this).html()复制代码slideUp(duration,easing,callback)slideUp()方法可以接受第三个参数，该参数也是可选参数，该参数是回调函数，表示动画完成时执行的函数复制代码script src=按钮$(#box).click(function(event) $(this).slideUp(1000,function() alert(

16、动画完成) $(this).show(); ););复制代码【slideDown()】与slideUp()方法相反，slideDown()方法使元素由上到下延伸显示注意没有参数时，持续时间默认为400毫秒复制代码script src=按钮$(#btn).click(function(event) $(#box).slideDown(););复制代码slideDown(duration)slideDown()方法可以接受一个持续时间参数持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script

17、src=litext-decoration: underline; margin-top: 2px; fast normal slow 100 1000恢复$(#box).hide();$(#reset).click(function() $(#box).hide();)$(#con li).click(function() $(#box).slideDown($(this).html()复制代码slideDown(duration,easing)slideDown()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swin

18、g，其他可以使用相关的插件复制代码script src=litext-decoration: underline; margin-top: 2px; swing linear恢复$(#box).hide();$(#reset).click(function() $(#box).hide();)$(#con li).click(function() $(#box).slideDown(2000,$(this).html()复制代码slideDown(duration,easing,callback)slideDown()方法可以接受第三个参数，该参数也是可选参数，表示回调函数，即动画完成时执行的

19、函数复制代码script src=按钮$(#btn).click(function(event) $(#box).slideDown(1000,function() alert(动画完成) $(#box).hide(); ););复制代码【slideToggle()】slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle()用滑动动画显示或隐藏一个匹配元素注意没有参数时，持续时间默认为400毫秒复制代码script src=按钮$(#btn).click(function(event) $(#box).slid

20、eToggle(););复制代码slideToggle(duration)当提供一个持续时间参数，slideToggle()成为一个动画方法持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: underline; margin-top: 2px; fast normal slow 100 1000$(#con li).click(function() $(#box).slideToggle($(this).html()复制代码slideTo

21、ggle(duration,easing)slideToggle()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swing复制代码script src=litext-decoration: underline; margin-top: 2px; swing linear$(#con li).click(function() $(#box).slideToggle(2000,$(this).html()复制代码slideToggle(duration,easing,callback)复制代码slideToggle()方法可

22、以接受第三个参数，该参数也是可选参数，表示回调函数，即动画完成时执行的函数script src=按钮$(#btn).click(function(event) $(#box)slideToggle(1000,function() alert(动画完成) ););复制代码淡入淡出让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的设置元素透明度为0，可以让元素不可见，透明度的参数是01之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画fadeIn()和fadeOut()方法正是这样的原理【fadeIn()】f

23、adeIn()方法通过淡入的方式显示匹配元素注意没有参数时，持续时间默认为400毫秒复制代码script src=按钮$(#btn).click(function(event) $(#box).fadeIn(););复制代码fadeIn(duration)fadeIn()方法可以接受一个持续时间参数持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时复制代码script src=litext-decoration: underline; margin-top: 2px; fast normal slow 1

24、00 1000恢复$(#box).hide();$(#reset).click(function() $(#box).hide();)$(#con li).click(function() $(#box).fadeIn($(this).html()复制代码fadeIn(duration,easing)fadeIn()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，默认值为swing，其他可以使用相关的插件复制代码script src=litext-decoration: underline; margin-top: 2px; swi

25、ng linear恢复$(#box).hide();$(#reset).click(function() $(#box).hide();)$(#con li).click(function() $(#box).fadeIn(2000,$(this).html()复制代码fadeIn(duration,easing,callback)fadeIn()方法可以接受第三个参数，该参数也是可选参数，该参数是回调函数，表示动画完成时执行的函数复制代码script src=按钮$(#btn).click(function(event) $(#box).fadeIn(1000,function() alert(动画完成) $(#box).hide(); ););复制代码【fadeOut()】fadeOut()方法与fadeIn()方法正好相反，可以通过淡出的方式隐藏匹配元素注意没有参数时，持续时间默认为400毫秒复制代码script src=按钮$(#btn).click(function(event) $(#box).fadeOut(););复制代码fadeOut(duration)fadeOut()方法可以接受一个持续时间参数，持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fa