下载文档原格式
jQuery UI目前的版本已经更新到了1.8.7。
个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。
所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。
也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。
首先将需要依赖的js文件导入到你的页面中。
需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。
切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。
jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。
有了上述的引用后就可以在你的页面中使用jQuery UI了。
先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。
Web前端JQuery⼊门实战案例前端jquery⼊门到实战为什么要学习Jquery?因为⽣活。
案例：<!DOCTYPE html><html lang="zh-CN"><head><meta charset = "UTF-8"><title>dashu</title><style>div {height: 100px;background-color: yellow;}</style><script>window.function(){//js注册事件会被覆盖//addEventListener}</script></head><body><input type="button" value="展⽰" id="btn1"><input type="button" value="设置内容" id="btn2"><div></div><div></div><script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var divs = document.getElementsByName("div");btn1.onclick = function() {for(var i=0; i<divs.length;i++){divs[i].style.display = "block";}};btn2.onclick = function(){for(var i=0; i<divs.length;i++){divs[i].innerText = "输⼊⽂本内容";}}</script></body></html>使⽤jquery案例：<!DOCTYPE html><html lang="zh-CN"><head><meta charset = "UTF-8"><title>dashu</title><style>div {height: 100px;background-color: yellow;display: none;}</style><script src="jquery-xxx.js"></script><script>// ⼊⼝，⽂档准备好了才执⾏$(document).ready(function(){console.log("dashu");// 要等⽂档加载完才执⾏// 注册事件 click()// 重复注册事件不会覆盖$("#btn1").click(function(){// alert("dashu");$("div").show();// $("div").show(300);// $("div").slideDown(300);// $("div").fadeIn(300);});$("#btn2").click(function(){$("div").text("我是内容");});});</script></head><body><input type="button" value="展⽰" id="btn1"><input type="button" value="设置内容" id="btn2"><div></div><div></div></body></html>jquery快速的，轻量级的，功能丰富的 js 库。
本文目录1.1通过代码示例学习jQueryUI库Accordion应用技术（第1部分） (2)1.1.1jQueryUI库及技术特性 (2)1.1.2使用JQuery UI系统库 (4)1.2Accordion应用技术示例 (6)1.2.1jQuery UI Accordion组件 (6)1.2.2jQuery UI系统库中的Accordion示例一 (6)1.2.3jQuery UI系统库中的Accordion示例二 (8)1.2.4Accordion组件active成员属性功能含义及应用 (10)1.2.5Accordion组件animated成员属性功能含义及应用 (11)1.2.6Accordion组件collapsible成员属性功能含义及应用 (12)1.2.7Accordion组件disabled成员属性功能含义及应用 (13)1.1通过代码示例学习jQueryUI库Accordion应用技术（第1部分）1.1.1jQueryUI库及技术特性1、jQueryUI库是jQuery 的一部分jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。
从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
2、jQuery UI主要包含三部分（1）交互组件交互组件主要包含有Draggable、Droppable（拖拽组件）、Resizable（可调整大小组件）、Selectable（选择组件）和Sortable（排序组件）等。
这些都是要与鼠标等设备进行交互的，所以属于界面交互组件。
（2）微件（小部件）所谓的微件其实是组成Web页面的一个个功能独立的小组件，主要包括有Accordion （手风琴式的折叠菜）、AutoComplete、ColorPicker、Dialog（对话框）、Slider（滑动条）、Tabs（页签）、DatePicker（日历）、Magnifier（放大镜效果）、ProgressBar、Spinner等小组件。
目录1.1跟我学jQuery EaseUI DataGrid数据表格组件及应用实例（第1部分） (2)1.1.1DataGrid组件 (2)1.1.2如何为Datagrid提供匹配的工具条组件 (5)1.1.3如何冻结数据列 (8)1.1.4如何实现数据列的水平和垂直对齐 (10)1.1.5如何展开DataGrid里面的行显示详细信息 (10)1.1跟我学jQuery EaseUI DataGrid数据表格组件及应用实例（第1部分）1.1.1DataGrid组件1、DataGrid（数据表格）该组件扩展自$.fn.panel.defaults，可以使用$.fn.datagrid.defaults重写默认值对象。
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。
DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。
它是轻量级的且功能丰富。
单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
2、主要的依赖关系主要依赖于panel、resizable、linkbutton和pagination组件。
3、应用HTML标签创建DataGrid组件——在<table>标签中不需要定义<thead>列头标签（1）相关的HTML标签<table class="easyui-datagrid"title="数据表格示例"style="width:100%;height:auto;" id="dataGridTableTagID"data-options="collapsible:true,fitColumns: true,fit:true,singleSelect:false,ctrlSelect:true,nowrap:false,autoRowHeight:true,striped:true,iconCls:'icon-edit',loadMsg:'正在加载数据，请等待...',url:'${pageContext.request.contextPath}/json/comboboxJson.txt',columns:[[{field:'id',title:'编号',width:100,sortable:true},{field:'text',title:'内容',width:100},{field:'selected',title:'状态',width:100,align:'right'}]],remoteSort:false,multiSort:true"></table>datagrid在创建完成后会根据url请求数据，这是通过ajax来完成的。
39个超实⽤jQuery实例应⽤特效摘要：程序员和Web设计师可以利⽤jQuery的诸多特性开发设计出许多光彩夺⽬的⽹站，当然这也取决于设计师们⾃⼰的创造⼒。
下⾯收集了39个开发者们最爱的jQuery应⽤以及教程，快来试试，让你的页⾯炫起来！1.：上下⽂滑动特效2.：图⽚幻灯⽚特效3.：魔幻盒4.：滚动特效5.：翻转特效,实现4个⽅向旋转6.：智能提⽰7.：幻灯⽚选项卡8.：选项卡式接⼝和菜单9.：可以让⾃定义列表（DTs）轻松⽣成⼀个漂亮光滑的⽔平Accordion插件10.：平移幻灯⽚这是⼀个教⼤家使⽤jQuery实现动画平移幻灯⽚效果的教程，学习该教程需要下载和这两个插件。
Animate Panning Slideshow with jQuery11.：Blockster过渡特效Blockster是JavaScript⾥⾯⼀款⾮常有特⾊展⽰过度效果的应⽤，其核⼼概念就是块与块之间的过渡。
Blockster transition effect12.：定制个性化的YouTube视频播放器Making a Custom YouTube Video Player13.：迷你下拉菜单教程Sexy Drop Down Menu w jQuery14.：构建卷条式图⽚Building a jQuery Image Scroller15.：动画⼴告图教程Custom Animation Banner with jQuery16.：制作页⾯画廊Full Page Image Gallery with jQuery17.：随机数产⽣器Randomizer App w/ jQuery18.：动画下拉菜单Animated Drop Down Menu with jQuery19.：制作交互式图⽚Making an Interactive Picture with jQuery20.：Twitter Ticker教程A jQuery Twitter Ticker21.：可以让⽂字环绕在漂浮图⽚周围的jQuery插件jQSlickWrap22.：制作动画⽂本和图标菜单Animated Text and Icon Menu with jQuery23.：图⽚墙Image Wall with jQuery24.Tim的两个核⼼是简化版的Accordion和悬浮效果。
1.导航类 (5)(1)Horizontal accordion: jQuery (5)(2)jQuery-Horizontal Accordion (5)(3)jQuery plugin: Accordion (5)(4)Accordion Menu script (6)(5)模仿ext的tab选项卡 (6)(6) (8)（7）De-Constructing Accordion and Hover Effects with jQuery (8)（8）导航到页内指定位置 (9)（10） Sexy Drop Down Menu w/ jQuery & CSS (9)（11） A Different Top Navigation (10)（12）Sliding Jquery Menu Tutorial (10)（13）Animated Drop Down Menu with jQuery (10)14. jQuery UI错误！未找到索引项。
Potato Menu (10)15. Make a Mega Drop-Down Menu with jQuery (11)（16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch (11)（17）jQuery (mb)Menu 2.7 (11)（18） jQuery File Tree (12)19.jQuery & CSS Example – Dropdown Menu (12)20. Reinventing a Drop Down with CSS and jQuery (12)21. Simple jQuery Dropdowns (13)22. Styling Drop Down Boxes with jQuery (13)23. jQuery iPod-style Drilldown Menu (13)24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready (14)25. mcDropdown jQuery Plug-in v1.2.07 (14)26. jQuery Drop Line Tabs (14)27. Cut & Paste jQuery Mega Menu (15)28. jdMenu Hierarchical Menu Plugin (15)2.消息提示类 (15)（1）Facebox (15)（2）SimpleModal (16)（3）jTip (16)（4）BetterTip (17)（5）clueTip (17)（6）jQuery lightBox plugin (17)（7）jQuery Impromptu (18)（8）jQuery.UI Messenger"Outlook like message notification Widget (18)（9）FancyBox (18)（10）Coda Popup Bubbles (19)（11）jGrowl (19)（12）jqWindowsEngine (20)（13）jQuery Alert Dialogs (20)（14）BeautyTips (21)（15）Facebook/Xiaonei 风格模态框 (21)3.图片展示类 (22)(1)imgAreaSelect (22)(3)Easy News (23)(4)jQZoom (24)(5)jCarousel Lite (24)(6)jCarousel (25)(7)Spacegallery-Jquery (25)(8)jQuery Slider Gallery (25)(9)jQuery Cycle Plugin (26)(10)Zoomimage (26)(11)prettyPhoto (27)(12)ThickBox (28)(13)Galleria (28)(14)jQuery Flash Plugin (29)(15)jQuery.SerialScroll (29)(16)InnerFade (30)(17)NyroModal (30)(18)CrossSlide (31)(19)Magnify (31)(20)Img Notes (32)(21)FancyZoom (32)(22)Jcrop (33)(23)Galleriffic (33)(24)Image Upload and Auto Crop (34)(25)prettyGallery (34)(26)jQuery.popeye (34)(27)s3Slider (35)(28)Pirobox (36)(29)Simple Controls Gallery (36)(30)Agile Carousel (36)(31)jQuery Plugin-Page Peel (37)(32)Easy Slider (37)(33)imgPreview (38)(34)Jquery Fade In.Fade Out (38)(35)Captify (38)(36)jParallax (39)(37)jQuery---运用图片预加载技术打造幻灯片 (40)(38)jQuery pageSlide (40)(39)Creating a Slick Auto-Playing Featured Content Slider (41)(40)Portfolio Layout Idea Using jQuery (41)(41)jQuery---图片先模糊后清楚 (42)(42)使用jQuery实现网页报纸 (42)(43)jQuery购物网站产品展示. (42)(44)Gallerific (43)(45)ZoomImage (44)(46)EasySlider (44)(47)The Slider from Barack Obama’s website (45)(48)CodaSlider (45)(50)Beautiful Slider 热点图书： (46)(51)LoopedSlider (46)(52)SpaceGallery (47)(53)jQuery Popeye (47)(54)Noobslide 热点图书： (48)(55)Accessible News Slider 热点图书： (48)(56)SmoothGallery 热点图书： (48)(57)jQuery Multimedia Portfolio (49)(58)s3Slider (49)(59)fxMarquee (49)(60)商品放大镜效果 (50)(61)PageSlide (51)64.不错的图片分类展示或者文字展示效果 (53)67.利用z-index做的图片展示效果 (54)4.自动填充类 (54)（1）AutoComplete-JQuery (54)（2）Facebook like Autocomplete (55)（3）jQuery Autocomplete Mod (55)（4）jqac (55)（5）jQuery Tag Suggestion (55)（6）Autocomplete-jQuery ajax (55)（7）jQuery.Suggest (56)（8）Autocomplete- jQuery plugin (56)（9）jQuery plugin: Autocomplete (56)（10）jSuggest (56)（11）jQuery Live Ajax Search Plug-in (57)（12）ddcombobox (57)5.分页类 (59)（1）jQuery Pagination (59)（2）pager jQuery plug-in (59)（3）JQuery Pager (60)6.编辑器类 (60)（1）jwysiwyg (60)（2）Damn Small Rich Text Editor (60)(3)xhEditor (61)7.表格类 (61)(1)Flexigrid (61)(2)Ingrid (61)(3)jQuery Grid (62)(4)tableHover (62)(5)JQuery.Resizer (63)(6)tablesorter (63)(7)csv2table (63)(8)tableFormSynch (64)8.色彩选择器类 (64)(1) Farbtastic (64)9.数据验证类 (66)1. jQuery plugin: Validation (66)2. Masked Input Plugin (66)3 jVal (67)10.报表类 (67)1 (67)2. Flot (67)3. jQchart (68)4 jquery.sparkline (68)5. jQuery Google Charts (演示地址) (69)6. jqPlot (演示地址) (69)11.上传类 (69)1. jqUploader (69)2. jQuery Multiple File Upload Plugin (69)3. jQuery: Ajax file upload (69)12.日期时间类 (70)1. jQuery UI Datepicker (70)2. Date Picker (70)3. Date Range Picker (70)13.圆角效果类 (71)1. jQuery Corner (71)2. JQuery Curvy Corners (71)3. jQuery Corner (72)4. jQuery Corners (72)14.评价类 (73)（1）Creating a Dynamic Poll with jQuery and PHP (73)（3） jQuery Ajax Rater Plugin (74)4. Star Rating widget (74)5. jQuery Star Rating Plugin (74)6. Ajax Poll (74)7.jQuery 投票调查组件 (75)15.虚拟键盘类 (76)1 (76)2.jQuery 虚拟键盘 (77)3.Virtual keyboard 虚拟键盘 (77)16.Form元件扩展 (77)（1）bobox (77)（2）jquery button:对按钮的扩展 (78)(3)ContextMenu (78)（4） (78)（5）在链接旁边加一个小图标效果 (79)6 jNice (79)7. jQuery calculate (79)8. jQuery select box (79)9. prettyCheckboxes (80)12. mcDropdown jQuery Plug-in (81)13. Create A Slider From A Select Box (81)14. TextArea Resizer (81)15. jQuery MultiSelect (82)16. Editable(jQuery Editable Plugin) (82)17. NicejForm (82)18. jScrollPane (83)19.利用jQuery制作类似skype的按钮效果. (83)20.jCheckbox: (83)（21）jQuery asmSelect 感谢博览群书友情提供 (84)17.游戏类 (84)1.连连看 (84)18.代码高亮类 (84)1. beautyOfCode (演示地址) (84)2. Chili (演示地址) (84)3. Highlight plugin (演示地址) (85)1.导航类(1)Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。
前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。
从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。
如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。
目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。
本文档主要涉及jQuery UI Accordion组件及技术特性、Accordion组件的典型属性及应用示例、Accordion组件的典型事件及应用示例、如何重新排序Accordion组件的Tab页头、如何拖动改变Accordion组件的大小等方面的内容。
欢迎读者下载相关的技术资料阅读和收藏，并提出良好的建议。
感兴趣的读者可以在百度文库页面中搜索“杨少波”，将能够搜索到杨教授工作室精心创作的优秀程序员职业提升必读系列技术资料。
这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，也欢迎读者发表和交流自己对软件开发、课程设计、项目实训、技术学习的心得体会。
1.1通过代码示例学习jQueryUI库——JQuery UI特效（过渡）类型组件应用示例（JQuery UI特有的动画效果库，允许元素在改变样式或外观或状态时，使用动画效果）1.1.1JQuery UI特效（过渡）类型组件应用示例——addClass API1、addClass API的主要功能addClass严格意义上讲不算UI，只是一个方法，属于API。
它扩展了JQuery的addClass 方法，当往元素增加一个CSS的类样式时，允许实现动画效果——主要实现在为选择器匹配的每个元素添加指定名称的CSS类样式时指定所期望产生的特定动画或者执行特定的功能函数。
2、为什么要提供addClass API在HTML里，多个CSS的类样式是以空格分隔应用的，而当一个节点（或称为一个标签）含有多个CSS的类样式时，由于DOM元素响应的className属性获取的不是CSS的类样式名称的数组，而是一个含有空格的字符串，这就使得多CSS的类样式的操作变得很麻烦。
幸运的是，jQuery已经将原来解析字符串等精细的操作变成了很简洁的API。
例如，addClass()就是添加一个CSS的类样式类名，而removeClass()就是移除CSS的类样式的类名，3、示例下面的示例实现为某个id属性为“effect”的标签元素在增加名称为newClass的CSS 类样式时，能够在1000ms内动态渐变地变化，并执行回调函数callback。
在回调函数callback 执行后，延迟1500ms后再除掉名称为newClass的CSS类样式。
$( "#effect" ).addClass( "newClass", 1000, callback );function callback() {setTimeout(function() {$( "#effect" ).removeClass( "newClass" );}, 1500 );}1.1.2特效类型组件应用示例——removeClass API1、removeClass API实现为选择器匹配的每个元素移除指定的样式和产生特定的动画实现与addClass插件相反的功能，扩展了JQuery的removeClass方法，当往元素移除一个css样式的时候，允许实现动画效果。
下面的示例实现去掉newClass属性；执行时间1000ms；回调方法callback。
$('#effect').removeClass('newClass', 1000, callback);1.1.3特效类型组件应用示例——toggleClass插件1、toggleClass插件实现为选择器匹配的每个元素添加或者移除指定的样式如果该元素已经有这个样式了，则移除该样式；否则将添加该样式——扩展了JQuery 的toggleClass方法，如果期望当启用和禁用某个CSS类样式时，允许执行相关的动画效果。
2、示例下面的示例实现selectedEffect:特效；options：参数；500：运行时间。
$("#effect").toggle(selectedEffect,options,500);而下面的示例将ID为effect的原CSS类样式中含有名称为newClass的CSS类样式除掉，反之添加此名称为newClass的CSS类样式。
$('#effect').toggleClass('newClass', 1000);1.1.4特效类型组件应用示例——switchClass插件1、switchClass插件的主要功能切换指定名称的CSS类样式时将产生出动画——扩展了JQuery的switchClass方法，当切换CSS类样式时，允许执行动画效果。
2、示例下面的示例实现将当前元素的newClass属性替换成anotherNewClass时，将用时1000ms。
$(".newClass").switchClass('newClass', 'anotherNewClass', 1000);1.1.5特效类型组件应用示例——show插件1、实现以指定的特效方式显示元素扩展了JQuery的show方法，当显示一个元素时，允许执行动画效果。
1.1.6特效类型组件应用示例——hide插件1、实现以指定的特效方式隐藏元素扩展了JQuery的hide方法，当隐藏一个元素时，允许执行动画效果。
1.1.7特效类型组件应用示例——toggle插件1、主要的功能扩展了JQuery的toggle方法，在显示和隐藏元素时，允许执行动画效果。
1.1.8特效类型组件应用示例——animate插件1、示例$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000 //执行时间);扩展了JQuery的animate方法，当元素执行动画时，允许使用颜色进行过渡，支持的样式有：backgroundColor、borderBottomColor、borderLeftColor、borderRightColor、borderTopColor、color、outlineColor，支持的值类型：hex(#FF0000)、rgb(rgb(255,255,255))、names("black") 。
下面为另一个应用示例：$(".block").toggle(function() {$(this).animate({ backgroundColor: "black" }, 1000);},function() {$(this).animate({ backgroundColor: "#68BFEF" }, 500);});1.1.9特效类型组件应用示例——effect插件1、特效的类型'blind' //从下至上收起来，直到隐藏'bounce' //上下晃动元素'clip' //上下同时收起来，直到隐藏'drop' //向左边移动并升高透明度，直到隐藏'explode' //将元素拆分成9宫，向外扩展并升高表明度，直到隐藏'fold' //向上收起，再向左收起，直到隐藏'highlight' //高亮某个元素'puff' //扩大元素宽高度并升高透明度，直到隐藏'pulsate' //闪烁元素'scale' //从右下向左上收起，直到隐藏'shake' //左右晃动（震动）元素，而震动块元素可以是图片，也可以是普通的DOM元素，如<div>、<span>等标签。
'size' //将元素缩至最小'slide' //从左往右滑动元素，直到全部显示'transfer' //缩小并迁移元素至触发事件的HTML元素2、语法这些特效（effect）可以通过如下的语句实现：$("selector").effect(effect,[option],[speed],[callback])。
其中的各个参数的含义如下：（1）effect就是效果名称，可以是上面列举的effects之一。
（2）option在不同的effect中包含不同的option，因此需要根据所实际应用的effect决定。
（3）speed可以是数值，单位是ms，也可以是“slow”、“normal”和“fast”等名称字符串。
（4）callback就是执行完动画后的回调函数。
3、不同的特效所对应的option参数（1）blindmode：值为hide/showdirection：值为vertical/horizontal（2）bouncedirection: 值为up/down/left/rightdistance: 值为数值，默认为20times: 值为数值，默认为5duration：值为数值，每个弹跳的速度，默认值250ms （3）clipmode：值为show/hidedirection：值为vertical/horizontal（4）dropdirection: 值为left/right/top/downmode: 值为show/hidedistance:值为数值。
