在页面的头部引入jQuery和jquery.textillate.js及一些依赖文件，如下：
<link rel="stylesheet" type="text/css" href="css/animate.css"/><script src="js/jquery-2.1.0.js"></script><script src="js/jquery.fittext.js"></script><script src="js/jquery.lettering.js"></script><script src="js/jquery.textillate.js"></script>
调用插件：
$(function () { ???$(‘.tlt‘).textillate();})上面的方法将会使用默认参数来调用插件。要改变默认参数，你可以使用data-属性来直接设置新参数：
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
当然要想灵活使用复杂效果的话，最好还是要了解他的可用参数：
<script type="text/javascript"> ???//初始化插件，修改参数 ???$(‘.tlt‘).textillate({ ?//当检测到多个文本动画时使用的默认选择器 ?selector: ‘.tlt‘, ??// 启用循环 ?loop: false, ??// 在替换之前设置每个文本的最小显示时间 ?minDisplayTime: 2000, ??// 在开始动画之前设置初始延迟 ?// (请注意，根据实际情况，您可能需要在运行此插件之前手动应用visibility: hidden属性来隐藏元素) ?initialDelay: 0, ??// 设置是否自动开始动画 ?autoStart: true, ??// 定制的“in”效果。 无论角色是否在动画之前或之后显示/隐藏，都会产生影响 ???inEffects: [], ??// 定制的“out”效果 ?outEffects: [ ‘hinge‘ ], ??// in 动画设置 ?in: { ???// 设置效果名称 ???effect: ‘fadeInLeftBig‘, ????// 设置应用于每个连续字符的延迟因子 ???delayScale: 1.5, ????// 设置每个字符之间的延迟 ???delay: 50, ????// 设置为true来同时为所有角色设置动画 ???sync: false, ????// 随机化字符序列 ???// (请注意，shuffle在sync = true时没有意义) ???shuffle: false, ????// 反转字符序列 ???// (请注意，在sync = true时，反向没有任何意义) ???reverse: false, ????// 动画完成后执行的回调 ???callback: function () {} ?}, ??// out 动画设置。 ?out: { ???effect: ‘hinge‘, ???delayScale: 1.5, ???delay: 50, ???sync: false, ???shuffle: false, ???reverse: false, ???callback: function () {} ?}, ??// 一旦textillate完成，就执行回调 ?callback: function () {}, ??// 设置标记动画的类型 (可用类型:"char"和"word") ?type: ‘char‘}); ???????????</script>可用效果如下：
查看演示
事件
Textillate 会触发下面的事件。
- start.tlt：当textillate 开始动画时触发。
- inAnimationBegin.tlt：当 in 动画开始时触发。
- inAnimationEnd.tlt：当 in 动画结束时触发。
- outAnimationBegin.tlt：当 out 动画开始时触发。
- outAnimationEnd.tlt：当 out 动画结束时触发。
- end.tlt：当textillate 结束动画时触发。
方法
- $element.textillate(‘start‘)：手动开始/重置textillate动画。
- $element.textillate(‘stop‘)：手动暂停/停止textillate动画。
- $element.textillate(‘in‘)：触发当前文字的 in 动画。
- $element.textillate(‘out‘)：触发当前文字的 out 动画。
textillate.js
原文地址：http://www.cnblogs.com/yxrs/p/7592717.html