今天为大家介绍的是一款简单、高性能和跨浏览器的jQuery文字动画插件，希望大家会喜欢。

Morphext是一款简单、高性能和跨浏览器的jQuery文字动画插件。该文字动画jQuery插件基于Animate.css。你可以设置使用多个不同的句子，Morphext会以你指定的CSS3动画方式轮流显示它们。

使用方法

首先要在页面中引入jQuery文件和 Animate.css 文件以及 morphext.min.js和morphext.css文件。

将你想要动画的文字句子封装到一个元素中，并且用逗号隔开每一个句子。

代码：I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator

然后可以在元素上调用Morphext()方法来启用插件：

代码：$("#js-rotating").Morphext();

可用参数

animation：类型：string，CSS动画的类型，可以是 Animate.css 中任何一种可用的动画类型。默认值：bounceIn。

separator：类型：string，用于分割句子字符串的符号。可以改变这个符号，例如使用"|"： So Simple | Very Doge | Much Wow | Such Cool。默认值：,

speed：类型：int，文字动画的时间间隔，单位毫秒，默认值2000。

代码：

$("#js-rotating").Morphext({

animation: "fadeIn", // Overrides default "bounceIn"

separator: "|", // Overrides default ","

speed: 3000 // Overrides default 2000

});

该文字动画插件在很大程度上依赖于Animate.css来制作两个句子之间的平滑高质量的过渡动画。默认的动画速度可以通过CSS来修改：

代码：

#yourElement, .yourClass {

/* Overrides Animate.css 1s duration */

-vendor-animation-duration: 3s;

}

一些问题

Animate.css的一些动画效果如"up"或"down"可能会超出窗口，这不是一个bug，解决的方法是在其父元素中使用overflow: hidden;。

插件中需要使用js来添加或移除Animate.css的class来执行相应的动画效果，如果浏览器不支持js，那么将看不到任何效果。

Animate.css依赖于CSS3 animations和transformations。如果浏览器不支持CSS3，该插件仍然会进行句子转换，但是没有动画效果，插件中没有提供回退的方法，如果你需要回退，可以使用Modernizr来编写回退的方法。

以上就是我们为大家准备的jQuery文字动画插件的相关内容，希望对大家可以有所帮助。