`
seebysee
  • 浏览: 10796 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

JQuery Plug-in Interface Animate

阅读更多
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:
$('#test').stop();
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:
$('#test').stopAll();
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:
$('#test').pause(2000);
分享到:
评论

相关推荐

    jQuery Slide plug-in 实做资料

    通过`.slideUp()`和`.slideDown()`方法控制元素的隐藏和显示,`.animate()`方法则可以自定义更复杂的动画效果。同时,使用`.delay()`和`.queue()`可以控制动画的执行顺序和时间间隔。 4. **初始化插件**:在DOM加载...

    bower-angular-animate, 用于AngularJS动画模块的Bower 软件包.zip

    bower-angular-animate, 用于AngularJS动画模块的Bower 软件包 封装的角度动画这里 repo 用于 npm 和 bower 上的分发。 这个模块的源是在主 AngularJS repo 中。 请针对该 repo 文件和请求请求。安装你可以使用 npm ...

    Beginning jQuery:From the Basics of jQuery to Writing your Own Plug-ins

    《 Beginning jQuery:From the Basics of jQuery to Writing your Own Plug-ins》是Jack Franklin和Russ Ferguson合著的一本关于jQuery的入门教程。这本书旨在帮助读者从零基础开始,逐步掌握jQuery的核心概念,并...

    前端项目-jquery-animateNumber.zip

    3. NPM 安装:如果你的项目使用 npm,可以运行 `npm install jquery-animate-number`。 引入文件后,在页面中通过 `<script>` 标签引用,或者在模块化构建系统中进行导入。 ### 使用方法 #### 基本用法 ```...

    svg-text-animate:一个Javascript库,用于在浏览器中将文本转换为SVG笔触动画

    svg-text-animate.js [] [] Svg-text-animate 一个在浏览器环境中将输入文本转化为描边动画的工具 demo 在线生成工具 使用方法 下载使用 从 中下载zip包并解压,在dist文件夹下找到编译好的js文件,通过以下方式...

    jquery-1.12.4-jquery.min.js.zip

    3. **动画效果**:jQuery 的`.animate()`方法让创建复杂的动画变得轻松,例如`$("div").animate({left: '+=50'}, 500)`会将指定div向右移动50像素,持续500毫秒。 4. **Ajax交互**:jQuery的`.ajax()`方法是进行...

    最新版JQuery-jquery-3.2.1.min.js

    - **动画**:`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等提供平滑的动画效果。 - **Ajax**:`$.ajax()`, `$.get()`, `$.post()`, `getJSON()`等方法简化了与服务器的数据交互。 ### 5. 兼容性和性能...

    react-native-animate-number:用于数字动画的可定制React本机组件

    安装$ npm install react-native-animate-number用法 import AnimateNumber from 'react-native-animate-number'例子基本的唯一需要的属性是value ,当此属性更改时,它将自动对value进行插值并执行动画。...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    - `$(element).animate()`:自定义动画,可以控制速度、缓动函数等。 6. **Ajax交互** - `$.ajax()`:进行异步请求,支持GET和POST等多种HTTP方法。 - `$.get()`/`.post()`:简化版的Ajax请求,用于快速实现GET...

    jquery-animateNumber-0.0.14

    《jQuery animateNumber插件详解与应用》 在Web开发中,动态效果的运用极大地提升了用户体验,数字动画就是其中一种常见的视觉表现形式。今天我们将聚焦于一个名为“jquery-animateNumber”的插件,它允许开发者...

    jquery-3.1.1.js和jquery-3.1.1.min.js

    它提供了丰富的API,包括选择器(如`$()`)、DOM操作(如`append()`、`remove()`)、事件处理(如`on()`、`off()`)、动画(如`animate()`)以及Ajax请求(如`$.ajax()`)等,使得JavaScript编程变得更加简单和高效...

    jquery数字跳动插件Animate Number.zip

    《jQuery数字跳动插件AnimateNumber深度解析》 在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    动画效果是jQuery吸引人的地方,`.fadeIn()`, `.slideUp()`, `.animate()`等方法让动态效果变得简单易行。最后,jQuery的Ajax功能,如`.ajax()`, `.get()`, `.post()`等,使异步数据交互变得无缝和直观。 在性能...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    《jQuery核心库:深入理解jquery-3.3.1.js与jquery.min-3.3.1.js》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画设计以及Ajax交互。在给定的文件中,我们有两个版本的...

    browser-deom1-excute-animate.gif

    browser-deom1-excute-animate.gif

    jquery-1.4.2.js,jquery-1.4.2-vsdoc.js Jquery-1.4.2及vs智能提示插件

    5. **动画效果**:`fadeIn()`、`slideUp()`、`animate()`等方法使得创建平滑的动画效果变得简单。 6. **Ajax**:`$.ajax()`、`$.get()`、`$.post()`等方法简化了异步请求,支持JSONP跨域请求。 **jQuery-1.4.2-...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **动画效果**:`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数为网页增加了丰富的动态效果。 4. **优化与性能提升** - **延迟加载**:使用`.ready()`或`$(document).ready()`确保DOM加载完成后执行脚本,...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    jQuery的`animate()`函数允许开发者创建自定义的动画效果,通过指定CSS属性的变化来实现平滑过渡。另外,`.fadeIn()`, `.slideUp()`, `.show()`, `.hide()`等预设动画则大大简化了常见的视觉效果。 5. **Ajax交互...

    vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字).docx

    Vue 利用 vue-animate-number 插件动态展示数字 摘要:本文将介绍如何使用 vue-animate-number 插件在 Vue 项目中动态展示数字,从 0 动态滚动到指定数字。 一、安装 vue-animate-number 插件 -------------------...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    3. 动画效果:`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数,让网页动态效果的实现变得直观且高效。 4. Ajax交互:`.ajax()`, `.getJSON()`, `.load()`等函数封装了异步请求,简化了与服务器的通信过程。 5...

Global site tag (gtag.js) - Google Analytics