JQuery 动画和UI.pptVIP

JQuery 动画和UI 目录 JQuery动画 JQuery UI 基本动画方法 既有透明度渐变,又有滑动效果,是最常用的动画效果函数。 show([speed][,callback])显示选择器选中元素 show()无动画的版本 Speed指定动画完成的时间，毫秒为单位， 预设速度:fast(0.2秒),slow(0.6),normal(0.4)。 callback动画显示完成后可选的触发回调函数 hide([speed][,callback])隐藏选择器选中元素 toggle([speed][,callback])切换选择器选中的元素，原来是隐藏的则显示，原来显示的则隐藏。 滑动动画方法 仅使用滑动渐变效果。 slideDown(speed[,callback])通过高度变化向下增大，来动态显示选择的元素。 slideUp(speed[,callback])通过高度变化向上减小来动态隐藏选择的元素。 slideToggle(speed[,callback])通过高度变化切换选择的元素。 淡入淡出动画方法 仅适用透明度渐变效果 fadeIn(speed[,callback])通过不透明度实现选中元素的淡入效果 fadeOut(speed[,callback])通过不透明度实现选中元素的淡出效果 fadeTo(speed,opacity[,callback])把选中元素的不透明度以渐进方式调整到指定的不透明度。fadeTo只改变对象的不透明度，即使透明度为0对象仍然占位。 自定义动画方法 Animate(params[,duration][,easing][,callback]) 创建自定义动画函数 params:类型是Options，一组包含样式属性及其值的集合，属性中如果有left,top，则动画元素的position必须设定为absolution或者relative duration:速度参数 easing:缓动类型 show(‘slow’)等价animate({height:”slow”,width:”slow”,opacity:”slow”},”slow”); 并发和排队：animate中以多个属性指定则并发， 连缀调用则排队；多组元素上的效果一般是并发的，当在回调函数中应用时则是排队的 自定义动画方法 stop([clearQueue][,gotoEnd])停止选择元素上正在运行的动画，clearQueue设置为true则清空队列，否则队列中等待的动画马上执行，gotoEnd设置true，当前动画立即完成并且重设show和hide的原始样式调用回调函数等 JQuery UI 准备工作 引用UI对应的JS文件 编写CSS样式作为皮肤 dialog(options) options:{key:value, … …}形式，键 autoOpen:true 调用方法时自动打开 modal:true 模式对话框，起遮罩效果 show:null 定义动画，slide scale size clip blind draggable:true是否可以拖拽 resizable:true是否可以重定义大小 width,height定义对话框高度宽度 buttons:{“title”:function(){},……} 定义按钮 tabs(options)选项卡 注意tabs的HTML结构：ul定义标签，内容div一定要和标签关联 tab支持很多事件：select load show add remove enable disable $(“#tabs”).tabs({add:function(event,ui){ … … }}) ui.index ui.panel ui.tab * *