textition.js

Textition.js is jQuery plugin for smooth transitions between text blocks.
It can be used to stylize titles, menu buttons, or any other text.
Demo

Initialization

To use textition.js you need jQuery library version 1.6 or later.
The initialization code can be inserted into head or body tag.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/textition.js"></script>

• textition.js
• jQuery 1.10.2

Usage

Add method textition() to the object that contains text for transition.

$(document).ready(function() {
   $('#example').textition(); 
});

The text should be in block element. The number of text blocks is not limited.

<div id="example">
   <span>First text</span>
   <span>Second text</span>
   <span>Third text</span>
</div>   

Because example has three div, text will be appearing in three variants, replace each other step by step.

Customization

Textition.js has some options. You can get acquainted with them in documentation.
Example of the parameters usage:

$(document).ready(function() {
   $('#example').textition({
      handler: 'mouseenter',
      animation: 'ease-in-out',
      speed: 1
   });
});                  

Browser support

Chrome 4.0, Safari 3.1, Firefox 4, Opera 10.5, Internet Explorer 10