Jquery Text Transition Script

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


  • 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.


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



<!-- Script by hscripts.com -->
<!-- Copyright by Hscripts -->
<!-- More scripts @www.hscripts.com -->
<html><head><title>Text Transition with Fading Effect</title><script src="./jquery.js" type="text/javascript"></script><script type="text/javascript">
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();};
var text = $('#text');
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;
-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>

  • 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


  • 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.


  • 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.

Related Scripts

Jquery Download

Ask Questions

Ask Question