JQuery 动画和UI.ppt

1、JQuery动画和UI,目录,JQuery动画JQueryUI,基本动画方法,既有透明度渐变,又有滑动效果,是最常用的动画效果函数。show(speed,callback)显示选择器选中元素show()无动画的版本Speed指定动画完成的时间，毫秒为单位，预设速度:fast(0.2秒),slow(0.6),normal(0.4)。callback动画显示完成后可选的触发回调函数hide(speed,callback)隐藏选择器选中元素toggle(speed,callback)切换选择器选中的元素，原来是隐藏的则显示，原来显示的则隐藏。,滑动动画方法,仅使用滑动渐变效果。slideDown(s

2、peed,callback)通过高度变化向下增大，来动态显示选择的元素。slideUp(speed,callback)通过高度变化向上减小来动态隐藏选择的元素。slideToggle(speed,callback)通过高度变化切换选择的元素。,淡入淡出动画方法,仅适用透明度渐变效果fadeIn(speed,callback)通过不透明度实现选中元素的淡入效果fadeOut(speed,callback)通过不透明度实现选中元素的淡出效果fadeTo(speed,opacity,callback)把选中元素的不透明度以渐进方式调整到指定的不透明度。fadeTo只改变对象的不透明度，即使透明度为0

3、对象仍然占位。,自定义动画方法,Animate(params,duration,easing,callback)创建自定义动画函数params:类型是Options，一组包含样式属性及其值的集合，属性中如果有left,top，则动画元素的position必须设定为absolution或者relativeduration:速度参数easing:缓动类型show(slow)等价animate(height:”slow”,width:”slow”,opacity:”slow”,”slow”);并发和排队：animate中以多个属性指定则并发，连缀调用则排队；多组元素上的效果一般是并发的，当在回调函数

4、中应用时则是排队的,自定义动画方法,stop(clearQueue,gotoEnd)停止选择元素上正在运行的动画，clearQueue设置为true则清空队列，否则队列中等待的动画马上执行，gotoEnd设置true，当前动画立即完成并且重设show和hide的原始样式调用回调函数等,JQueryUI,准备工作引用UI对应的JS文件编写CSS样式作为皮肤dialog(options)options:key:value,形式，键autoOpen:true调用方法时自动打开modal:true模式对话框，起遮罩效果show:null定义动画，slidescalesizeclipblinddraggable:true是否可以拖拽resizable:true是否可以重定义大小width,height定义对话框高度宽度buttons:“title”:function(),定义按钮,tabs(options)选项卡注意tabs的HTML结构：ul定义标签，内容div一定要和标签关联tab支持很多事件：selectloadshowaddremoveen