About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.
关于Interface
Interface 以轻量级JavaScript工具为基础开发而来的富界面组件集合。利用他,你可以像使用Jquery创建JavaScript一样创建富界面客户端Web程序和界面。
Document 文档部分
Animate
Interface overwrites the default 'animate' function with an extended one. The new 'animate' function brings several enhancements:
Interface覆盖了原有的animate方法,并加强了他的功能;
· Animates a collection of properties using one timer instead of using separate timers per property
· Handles color properties like 'backgroundColor', 'borderColor' etc.
· Animates styles and CSS classes
使用一个计时器控制一个动画的集合,而不是分别为每一个成员属性都分配一个计时器;
像处理“backgroundcolor”,“borderColor”属性一样处理颜色属性。
使样式和CSS类拥有动画效果;
Code sample:
$('#test').animate(
{
left: 100,
style: 'padding: 20px 30px; margin: 10px;',
className: 'greenBorders',
opacity: 0.4,
backgroundColor: 'olive'
},
'slow'
);
Also, Interface offfers new functions to handle animations:
当然,Interface也提供了许多新的方法处理动画;
stop
Stop an animation at any time.
使动画暂定;
Options:
gotolaststep
|
Boolean
|
optional
|
Whatever to go to the last step in animation
|
Code sample:
stopAll
Stop current animation and clear all queued animations.
停止当前的所有动画,并清空所有等待队列中的动画;
Options:
gotolaststep
|
Boolean
|
optional
|
Whatever to go to the last step in current animation
|
Code sample:
pause
Add a pause between animations. The selection is not animated till the pausing time expires.
动画播放的过程中停止动画。选中区知道暂停时间结束之前不会停止动画的播放;
Options:
speed
|
String|Number
|
optional
|
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to pause (e.g. 1000).
|
callback
|
Function
|
optional
|
A function to be executed whenever the pausing completes.
|
Code sample:
分享到:
- 2007-07-20 08:35
- 浏览 2149
- 评论(0)
- 论坛回复 / 浏览 (0 / 4243)
- 查看更多
相关推荐
前端项目-jquery-animateNumber,jQuery animate number plugin
bower-angular-animate, 用于AngularJS动画模块的Bower 软件包 封装的角度动画这里 repo 用于 npm 和 bower 上的分发。 这个模块的源是在主 AngularJS repo 中。 请针对该 repo 文件和请求请求。安装你可以使用 npm ...
jquery-animateNumber 数字动画插件 提供js和css文件,需求可以直接下载下来使用
browser-deom1-excute-animate.gif
前端项目-just-animate,Web Animation library
svg-text-animate.js [] [] Svg-text-animate 一个在浏览器环境中将输入文本转化为描边动画的工具 demo 在线生成工具 使用方法 下载使用 从 中下载zip包并解压,在dist文件夹下找到编译好的js文件,通过以下方式...
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
react-responsive-animate-navbar ()只是一个简单、灵活且完全可定制的响应式导航栏组件。桌面演示:响应式演示:安装npm install --save react-responsive-animate-navbar用法 import React from "react" ;import ...
安装$ npm install react-native-animate-number用法 import AnimateNumber from 'react-native-animate-number'例子基本的唯一需要的属性是value ,当此属性更改时,它将自动对value进行插值并执行动画。...
前端项目-marker-animate-unobtrusive,Unobtrusive Google Maps animated marker
前端项目-kiss.animate,kiss.animate是基于jquery的滑动动画插件,也是使用简单API的最佳代码结构实践。
前端开源库-jeefo_animate吉福动画,吉福框架的一部分
jquery-animateNumber 用于包含数字(整数或浮点数)的元素,以在短时间内将数字动画化为新值。用法通话签名: $ ( "..." ) . animateNumber ( newNumber ) ;$ ( "..." ) . animateNumber ( newNumber , callback ) ...
React简单动画React UI动画变得简单产品特点从样式A到B的动画CSS关键帧动画链接动画序列小尺寸,无其他依赖性安装$ npm install react-simple-animate快速开始组件import React from " react " ;import { Animate , ...
jquery-animate-collection 使用集合预过滤器、动画代码块和基于项目的选项扩展 jquery-animate。 jquery.animateCollection 提供了一种扩展 jquery-animate 的方法,允许更好地控制动画集合中的单个元素。 用法 ...
用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class...
包装的角动画 此仓库用于在npm和bower上分发。... script src =" /bower_components/angular-animate/angular-animate.js " > </ script > 然后将ngAnimate添加为您的应用程序的依赖项: angular .
jQuery animate() 方法允许您创建自定义的动画。 jQuery 动画实例jQuery jQuery 动画 – animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法: $(selector).animate({params},speed,callback); 必需的...
前端项目-css3-animate-it,css3/jquery插件,用于在元素进入视图时对其进行动画处理
主要原理是:点击当前图片的时候,复制(克隆)当前图片在当前位置,然后利用jQuery的animate()方法实现图像的飞入效果 使用方法: 1、将附件index.html中的样式以及代码部分复制到你的网页中即可 2、...