Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示。每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充。所有动画可以反向显示从而可以方便的实现元素的显示和隐藏。 本篇介绍了Kendo UI特效的概要,完整的文档可以参考API文档

准备开始

所有Kendo UI 特效都是通过kendo.fx JQuery 选择器封装来创建,每个封装支持显示多种特效。例如:

1 <div id="foo">
2     I will be animated
3 </div>
4  
5 <script>
6     var effectWrapper = kendo.fx($("#foo"));
7     var fadeOutEffect = effectWrapper.fadeOut();
8     fadeOutEffect.play();
9 </script>

和jQuery 方法一样,kendo UI fx也支持方法链,比如上面代码可以简化为:

1 <div id="foo">
2     I will be animated
3 </div>
4  
5 <script>
6     kendo.fx($("#foo")).fadeOut().play();
7 </script>

指定特效显示的方向

大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向,或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的。

1 <div id="foo">
2     I will be animated
3 </div>
4  
5 <script>
6     var fadeOut1 = kendo.fx($("#foo")).fadeOut();
7     var fadeOut2 = kendo.fx($("#foo")).fade("out");
8     var fadeOut3 = kendo.fx($("#foo")).fade().direction("out");
9  
10     //Call .play() to run any of the above animations
11 </script>

组合特效

可以将多个特效组合中一起。比如:

1 <div id="foo">
2     I will be faded out and zoomed out.
3 </div>
4  
5 <script>
6     var effectWrapper = kendo.fx($("#foo"));
7     var fadeOutEffect = effectWrapper.fadeOut();
8     fadeOutEffect.add(effectWrapper.zoomOut());
9     fadeOutEffect.play();
10     // Calling reverse will zoom in and fade in.
11 </script>

组合特效也可以同时应用到多个元素,这时需要通过$when 方法。比如下面代码:

1 <div id="foo">
2     I will fade out.
3 </div>
4 <div id="baz">
5     I will also fade out.
6 </div>
7  
8 <script>
9     //Use jQuery Deferred to chain multiple effects
10     var eleFoo = $("#foo"),
11         eleBaz = $("#baz");
12  
13     $.when(kendo.fx(eleFoo).fadeOut().play(),
14                 kendo.fx(eleBaz).fadeOut().play()).then(function(){
15             //This will be called when both animations are done
16             alert("Both elements faded!");
17         });
18 </script>

Kendo UI支持的特效种类

Kendo UI支持下面几种特效,具体请参见其文档

Kendo UI开发教程(8): Kendo UI 特效概述的更多相关文章

  1. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  2. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  3. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

    Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...

  4. Kendo UI开发教程(6): Kendo DataSource 概述

    Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...

  5. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  6. Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source

    Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化.模板由属性data-template指定,它的值为 ...

  7. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

    Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...

  8. Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

    Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...

  9. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

随机推荐

  1. SQL字符串处理函数

    字符串函数对二进制数据.字符串和表达式运行不同的运算.此类函数作用于CHAR.VARCHAR. BINARY. 和VARBINARY 数据类型以及能够隐式转换为CHAR 或VARCHAR的数据类型. ...

  2. 前端开发——移动bug整理

    1.ios下jquery的delegate失效问题? 解决方案: $("body").delegate(...) 改为 $(".item").delegate( ...

  3. sql注入工具sqlmap使用参数说明

    Options(选项):--version 显示程序的版本号并退出-h, --help 显示此帮助消息并退出-v VERBOSE 详细级别:0-6(默认为1)Target(目标):以下至少需要设置其中 ...

  4. phpstorm集成phpunit

    1.下载phpunit.phar,将该文件放到某个工程中 2.File > Settings > Languages & Frameworks > PHP > PHPU ...

  5. jquery 超简单的点赞效果

    1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...

  6. HTTP 报文中的 Header 字段进行身份验证

    [小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证 在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读 ...

  7. ubuntu下java和tomcat安装配置

    oracle下载jdk-7u51-linux-i586.tar.gz sudo cp Downloads/jdk-7u51-linux-i586.tar.gz /usr/local/java //拷贝 ...

  8. mysql存储过程及常用函数

    原文:mysql存储过程及常用函数 一.函数 1.数学函数 CEIL()进一取整 SELECT CEIL(1.2);2 FLOOR()舍一取整 SELECT FLOOR(1.9);9 MOD取余数(取 ...

  9. QueryOver<T>

    NHibernate 数据查询之QueryOver<T>   一.限制运算符 Where:筛选序列中的项目WhereNot:反筛选序列中的项目 二.投影运算符 Select:创建部分序列的 ...

  10. ORACLE抽象数据类型

    ORACLE抽象数据类型 *抽象数据类型*/1,抽象数据类型 概念包含一个或多个子类型的数据类型不局限于ORACLE的标准数据类型可以用于其他数据类型中 2,创建抽象数据类型 的语法(必须用NOT F ...