Jquery Text Transition Script

Use this simple jquery copy paste script to change a single line text to another with the fading effect.

Features

Use this script to animate your text with transition effects.
Change one text to another with simple fading effect.
Jquery fades between the lines creating another new line with smooth transition effect.
Can be used to move any elements with stylish fading animation.
Easy to integrate into any webpage.
Compatible with all the modern browsers except internet explorer 8.

Preview

Jquery Text Transition with Fading Effect

Every one can find fault, few can do better

Fire is a good servant but a bad master

Better the devil you know than the devil you don't know

Curses are like chickens, they come home to roost

Love covers a multitude of sins

Mirrors do everything we do, but they cannot think for themselves

©h

Downloads

<html><head><title>Text Transition with Fading Effect</title><script src="./jquery.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function()
{
var same_char_arrange_delay = 1000,other_char_delay = 500,transaction_time = 2000,other_char_max_delay = 2000,delete_char_max_delay = 2000;$.fn.textAnimator = function(content, choices){var passval = arguments;var lefttoright = (function (ele) {var obj = ele.data('textanimator');if (!obj){var content = [], choices;if (passval.length === 1 && passval[0] instanceof Array){content = passval[0];}else if (passval.length === 1 && typeof passval[0] === 'object'){choices = passval[0];}else if (passval.length === 2){content = passval[0];choices = passval[1];}if (content.length === 0){ele.find('p').each(function () {content.push($(this).text());});}// Clear the contents in the containerele.html("");// Create a text animatorobj = new AnimaterText(ele, content, $.extend({}, $.fn.textAnimator.defaults, choices));ele.data('textanimator', obj);}return obj;})(this);if (typeof passval[0] === 'string' && lefttoright[passval[0]]){lefttoright[passval[0]].apply(lefttoright, Array.prototype.slice.call(passval, 1));}return this;};$.fn.textAnimator.defaults = {effect: 'random',duration: 2000,rearrangeDuration: 1000,centered: true,loop: true};// Effects for characters, Customize as you want$.fn.textAnimator.effects = [{name: 'none',fn: function (item){this.container.append(item.domNode.show());}}, {name: 'fadeIn',fn: function (item, dfd) {this.container.append(item.domNode.fadeIn(transaction_time, dfd.resolve));return dfd.promise();}}, {name: 'slideLeft',fn: function (item, dfd) {item.domNode.appendTo(this.container).css({'left': -1000}).show().animate({'left': item.pos.left}, transaction_time, dfd.resolve);return dfd.promise();}}, {name: 'slideTop',fn: function (item, dfd) {item.domNode.appendTo(this.container).css({'top': -1000}).show().animate({'top': item.pos.top}, transaction_time, dfd.resolve);return dfd.promise();}}];function Blurb(){this.str = ''; // The text stringthis.characterList = []; // Array of ch objects};Blurb.prototype = {use: function (val){var ch = null;$.each(this.characterList, function () {if (this.character === val && !this.used){this.used = true;ch = this;return false; }});return ch;},reset: function (){$.each(this.characterList, function () {this.inserted = false;this.used = false;});}};function chars(){this.character = null; // characterthis.domNode = null; // The span element that wraps around the characterthis.pos = null; // The domNode positionthis.used = false;this.inserted = false;this.visited = false;};// Gets all the styles function styleChange(dom){var style, styleList = {};if (window.getComputedStyle){style = window.getComputedStyle(dom, null);if (style.length){$.each(style, function () {var camel = this.replace(/\-([a-z])/, function (a, b) {return b.toUpperCase();}),val = style.getPropertyValue(this);styleList[camel] = val;});}else{for (var prop in style){if (typeof style[prop] !== 'function' && prop !== 'length'){styleList[prop] = style[prop];}}}}else{style = dom.currentStyle || dom.style;for (var prop in style){if (style.hasOwnProperty(prop)){styleList[prop] = style[prop];};}}return styleList;};function AnimaterText(element, content, choices){this.options = choices;this._showCharEffect = null;var self = this;// If an effect is chosenif (this.options.effect !== 'random'){$.each($.fn.textAnimator.effects, function () {if (this.name === options.effect){self._showCharEffect = this.fn;return false; }});}// Clone the target element, and remove the id attribute var clone = element.clone().removeAttr('id').appendTo(document.body);// Copy all the styles. clone.css(styleChange(element[0]));clone.css({position: 'absolute',top: '-1000px'});this.phantomContainer = $('<div />').css({'position': 'relative','visibility': 'hidden'}).appendTo(clone);element.css('overflow', 'hidden');this.elementHeight = element.height();// Contains transitioning text
this.container = $('<div />').css('position', 'relative').appendTo(element);// Holds the previous blursthis._previous = null;this._position = { bottom: element.height()};this.blurbs = [];this.elem = element;if (content && content instanceof Array){this.data(content);}};AnimaterText.prototype = {data: function (d){this.stop();this.list = d;this.blurbs = [];},start: function (){// If there are no items, then simply exitif (!this.list || this.list.length === 0 || this._playing) {return;}var self = this,index = this._index || 0,$elem = this.elem;this._playing = true;this._pause = false;var rotater = (function (self) {return function() {// If we've reached the last blursif (index === self.list.length - 1){
// Reset the position of every character$.each(self.blurbs, function (j, item){item.reset();});index = -1;// If loop=false, pauseif (!self.options.loop){self.pause();}}index++;self._index = index;rotate(index); // rotate the next blurs}})(this);// Begin transitioning through the itemsfunction rotate(i){if (self._pause){return;}self._rotate(i).done(function (){$elem.trigger('textualzer.blurbchanged', { index: i });setTimeout(rotater, self.options.duration);});}// Begin iterating through the list of blurbs to displayrotate(index);},stop: function (){this.pause();this._playing = false;this._previous = null;this._index = 0;this.container.empty();this.phantomContainer.empty();},pause: function (){this._pause = true;this._playing = false;},_rotate: function (index){var dfd = $.Deferred(),current = this.blurbs[index];if (!current){var phantomBlurbs = [], i, len, ch, c;current = new Blurb();current.str = this.list[index];this.blurbs.push(current);for (i = 0, len = current.str.length; i < len; i++){ch = current.str.charAt(i);if (ch === ''){this.phantomContainer.append(' ');}else{c = new chars();c.character = ch;c.domNode = $('<span/>').text(ch);this.phantomContainer.append(c.domNode);phantomBlurbs.push(c);}}var height = this.options.centered ? (this.elementHeight - this.phantomContainer.height()) / 2 : 0;$.each(phantomBlurbs, function (index, c) {c.pos = c.domNode.position();c.domNode = c.domNode.clone();c.pos.top += height;c.domNode.css({'left': c.pos.left,'top': c.pos.top,'position': 'absolute'});current.characterList.push(c);});this.phantomContainer.html('');}if (this._previous){var self = this,keepList = [],removeList = [],dfds = [],randomHideEffect = getRandomHideEffect.call(this);$.each(this._previous.characterList, function (index, prevC) {var currC = current.use(prevC.character);if (currC){currC.domNode = prevC.domNode; currC.inserted = true;keepList.push(currC);}else{var d = $.Deferred();removeList.push(d);randomHideEffect(prevC.domNode.delay(Math.random() * delete_char_max_delay)).done(function () {prevC.domNode.remove();d.resolve();});}});// When all characters that aren't common to the blurs have been removed...$.when.apply(null, removeList).done(function () {// Move charactes that are common to their new positionsetTimeout(function () {$.each(keepList, function (index, item) {var d = $.Deferred();item.domNode.animate({'left': item.pos.left,'top': item.pos.top}, self.options.rearrangeDuration, d.resolve);dfds.push(d.promise());});// When all the characters have moved to their new position, show the remaining characters$.when.apply(null, dfds).done(function () {setTimeout(function () {showCharacters.call(self, current).done(function () {dfd.resolve();});}, other_char_delay);});}, same_char_arrange_delay);});}else{showCharacters.call(this, current).done(function () {dfd.resolve();});}this._previous = current;return dfd.promise();},destroy: function (){this.container.parent().removeData('textanimator').end().remove();this.phantomContainer.remove();}};function getRandomHideEffect(){var self = this;var eff = [function (target){var d = $.Deferred();target.animate({top: self._position.bottom,opacity: 'hide'}, d.resolve);return d.promise();}, function (target){var d = $.Deferred();target.fadeOut(1000, d.resolve);return d.promise();}];return eff[Math.floor(Math.random() * eff.length)];};function showCharacters(item){var self = this,effects = $.fn.textAnimator.effects,effect = this.options.effect === 'random' ? effects[Math.floor(Math.random() * (effects.length - 2)) + 1].fn : this._showCharEffect, finalDfd = $.Deferred(), animationDfdList = [];// Iterate through all ch objects$.each(item.characterList, function (index, ch) {// If the character has not been already inserted, animate it, with a delayif (!ch.inserted) {ch.domNode.css({'left': ch.pos.left,'top': ch.pos.top});var animationDfd = $.Deferred();setTimeout(function () {effect.call(self, ch, animationDfd);}, Math.random() * other_char_max_delay);animationDfdList.push(animationDfd);}});// When all characters have finished moving to their position, resolve the final promise$.when.apply(null, animationDfdList).done(function () {finalDfd.resolve();});return finalDfd.promise();};
});$(function(){
var text = $('#text');
text.textAnimator();
text.textAnimator('start');});</script><style type='text/css'>#text{
width: 550px;
height: 200px;
margin: 0 auto;
margin-top: 40px;
font:45px "Bookman Old Style";
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;}</style></head><body>
<div style='font-size: 25px; padding-top: 50px; font-weight: bold; color: #4e4e4e;' align=center>Jquery Text Transition with Fading Effect</div><div id="text">
<p align="center">Every one can find fault, few can do better</p>
<p align="center">Fire is a good servant but a bad master</p>
<p align="center">Better the devil you know than the devil you don't know</p>
<p align="center">Curses are like chickens, they come home to roost</p><p align="center">Love covers a multitude of sins</p><p align="center">Mirrors do everything we do, but they cannot think for themselves</p></div>
<table style='padding-left: 450px; padding-top: 30px;'><tr><td><div style=" padding-left: 220px;font-size: 10px;color: #dadada;" id="dumdiv">
<a href="//www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div></td></tr>
</table></body>
</html>

Release Date - 29-03-2013
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy paste the Jquery Text Transition Script in your webpage.
Download jquery.js file and place the file in your folder.
Now run the file in your browser to view the functionality of the script.
You can change the sentences for which you want to animate the changing effects.
<p align="center">Love covers a multitude of sins</p> // Change the sentences here.

License

This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet our GPL License terms.