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

深入学习jQuery的三种常见动画效果 　　动画效果是jQuery吸引人的地方。通过jQuery的动画方法，能够轻松地为网页添加视觉效果，给用户一种全新的体验。jQuery动画是一个大的系列，本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出 显隐 　　在CSS中，总结过实现元素显隐的9种思路。而jQuery中的show()和hide()方法是通过改变display属性来实现元素显隐效果，它们是jQuery中最基本的动画方法 【hide()】 　　hide()方法是隐藏元素的最简单方法。如果没有参数，匹配的元素将被立即隐藏，没有动画。这大致相当于调用.css(display, none) 　　display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline 复制代码 script src=/jquery/1.12.4/jquery.min.js/script button id=box按钮/button script $(#box).click(function(event){ $(this).hide(); }); /script 复制代码 hide([duration]) 　　当提供一个持续时间参数，hide()就变成了一个动画方法。hide()方法将为匹配元素的宽度、高度及不透明度同时执行动画。一旦透明度达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局 　　持续时间是以毫秒为单位的，数值越大，动画越慢。默认值为normal，代码400毫秒的延时；fast和slow分别代表200和600毫秒的延时 复制代码 script src=/jquery/1.12.4/jquery.min.js/script style li{text-decoration: underline; margin-top: 2px;} /style ul id=con style=display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none; lifast/li linormal/li lislow/li li100/li li1000/li /ul button id=reset恢复/button div id=box style=display:inline-block;height: 100px;width: 300px;background-color: lightblue/div script $(#reset).click(function(){ $(#box).show(); }) $(#con li).click(function(){ $(#box).hide($(this).html()) }) /script 复制代码 hide([duration][,easing]) 　　hide()方法可以接受一个可选参数easing，表示过渡使用哪种缓动函数。jQuery自身提供linear和swing，其他可以使用相关的插件，其中默认值为swing 　　linear表示匀速直线运动，而swing则表示变速运动，如下图所示 linear swing 复制代码 script src=/jquery/1.12.4/jquery.min.js/script style li{text-decoration: underline; margin-top: 2px;} /style ul id=con style=display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none; liswing/li lilinear/li /ul button id=reset恢复/button div id=box style=display:inline-block;height: 100px;width: 300px;background-color: lightblue/div script $(#reset).click(function(){ $(#box).show(); }) $(#con li).click(function(){ $(#box).hide(2000,$(this)