jQuery ui effects

简介: jQuery ui 内置了一组effects,包括:blind,bounce,clip,drop,explode,fade,fold,highlight,pulsate,puff,scale,size,shake,slide,transfer这些效果 这些effect可以通过$("selector").effect(effect,[option],[speed],[callback]),或者是jQuery中包装的show和hide方法调用。

jQuery ui 内置了一组effects,包括:blind,bounce,clip,drop,explode,fade,fold,highlight,pulsate,puff,scale,size,shake,slide,transfer这些效果

这些effect可以通过$("selector").effect(effect,[option],[speed],[callback]),或者是jQuery中包装的show和hide方法调用。其参数和effect调用相同。

这里说明下参数的含义:

effect:就是效果名称,可以是上面列举的effects之一。

option:在不同的effect中包含不同的option。

speed:可以是数值,单位是ms,也可以是"slow","normal", 和 "fast"。

callback:就是执行完动画后的回调函数。

下面就每个effect的option做一个说明:

blind:

  mode:值为hide/show

   direction:值为vertical/horizontal


 bounce: 

   direction: 值为up/down/left/right

  distance: 值为数值,默认为20

  times: 值为数值,默认为5

  duration:值为数值,每个弹跳的速度,默认值250ms

  

 clip:

  mode:值为show/hide

   direction:值为vertical/horizontal


drop

  direction: 值为left/right/top/down

  mode: 值为show/hide

  distance:值为数值。


 explode

  pieces: 值为数字,爆炸的块数。默认为9

  mode: 值为show/hide/toggle


fade

  mode: 值为show/hide


fold

  mode:值为show/hide

  size: 值为数值,折叠的大小,默认为15

  horizFirst:bool值,是否先水平方向折叠

  

highlight

  mode: 值为show/hide

  color: 值为颜色值,默认为#ffff99


pulsate

  mode:值为show/hide

  times:值为数值,跳动的次数

  

puff

  mode:值为show/hide

  percent: 值为数值,膨胀的比例,默认为150

  

scale

  mode:值为show/hide

  percent: 值为数值

  direction:vertical/horizontal/both

  origin:原始大小

  from: 效果开始的大小


size

  mode:值为show/hide

  restore: bool类型,默认false

  scale:vertical/horizontal/both

  origin:原始大小

  from:从一定的高度和宽度开始

  to:到一定的高度和宽度结束

  

shake

   mode:值为show/hide

  direction: 值为left/right/up/down,默认值left

  distance: 值为数字,默认值20

  times:值为数字

  duration:每次效果的速度

   

slide

  mode:值为show/hide

  direction: 值为left/right/up/down

  distance: 值为数值

  

transfer

  to:目标jQuery对象

  className: 需要添加的css样式名称.


jQuery ui 为我们封装了上面的一些效果,在大部分的开发中,上述的效果基本可以满足我们的需求。而不需要我们自己另行开发。此外,在jQuery ui中封装了一组easing

可以在effect中搭配easing的使用,注意easing也是上述所有effect的option中的一个option,option的名称就是easing。    

目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1351 0
|
6月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
44 4
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
153 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
371 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
250 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
173 0
|
JavaScript
jQuery UI 自定义样式的日历控件
在线演示 本地下载
1286 0