Выскальзывающие символы с использованием jQuery

<div class="sl_examples">
	<a href="#" id="example1" data-hover="Фантазия">Иллюстрации</a>
	<a href="#" id="example4">Коллекции</a>
</div>

.sl_examples{
	float:left;
	font-family: 'EB Garamond', arial, serif;
	font-size:50px;
	line-height:50px;
	color:#f0f0f0;
	margin-right:5px;
	text-transform:uppercase;
}
.sl_examples a{
	display:block;
	position:relative;
	float:left;
	clear:both;
	color:#fff;
}
.sl_examples a > span{
	height:50px;
	float:left;
	position:relative;
	overflow:hidden;
}
.sl_examples a span span{
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	text-align:center;
}
.sl_examples a span span.sl-w1{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
	z-index:2;
}
.sl_examples a span span.sl-w2{
	color:#e82760;
	text-shadow:-1px 1px 2px #9f0633;
	z-index:3;
}

$(window).load(function(){
	$('#example1').hoverwords({ delay:50 });
});

delay		: false,		// каждый символ использует различное время анимации
speed		: 300,			// скорость анимации
easing		: 'jswing',		// эффект анимации
dir			: 'leftright', 	// направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, 
overlay		: false,		// выскальзывающее слово появляется поверх текущего
opacity		: true			// анимация прозрачности символов

/*
Плагин hoverwords
*/
(function($) {
	
	var aux		= {
			toggleChars	: function($el, settings) {
				var $wrappers	= $el.find('.sl-wrapper'),
					total		= $wrappers.length,
					c1			= $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1',
					c2			= $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2';		
				
				$el.addClass(c1).removeClass(c2);
				
				$wrappers.each(function(i) {
					var $wrapper 			= $(this),
						interval;
					
					switch(settings.dir) {
						case 'leftright' : interval = i * settings.delay; break;
						case 'rightleft' : interval = (total - 1 - i) * settings.delay; break;
					};
					
					if(settings.delay) {
						setTimeout(function() {
							aux.switchChar($wrapper, $el, settings, c1, c2);
						}, interval);
					}	
					else
						aux.switchChar($wrapper, $el, settings, c1, c2);
				});
			},
			switchChar	: function($wrapper, $el, settings, c1, c2) {
				var $newChar			= $wrapper.find('span.' + c1),
					$currentChar		= $wrapper.find('span.' + c2),
					nextWrapperW		= $currentChar.width();
					
				if($newChar.length)
					nextWrapperW		= $newChar.width();
				
				//Новый символ добавляется
				if($newChar.length)	{
					var param	= {left	: '0px'};
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 1;
					
					$newChar.stop().animate(param, settings.speed, settings.easing);
					
					//анимация для ширины контейнера
					$wrapper.stop().animate({
						width	: nextWrapperW + 'px'
					}, settings.speed);
				}
				
				//Текущий символ убирается
				if(!settings.overlay || c1 === 'sl-w1') {
					if(settings.dir === 'leftright')
						var param	= {left	: -$currentChar.width() + 'px'};
					else
						var param	= {left	: nextWrapperW + 'px'};
						
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 0;
					$currentChar.stop().animate(param, settings.speed, settings.easing);
				}
			}
		},
		methods = {
			init 	: function(options) {
				
				if(this.length){
					
					var settings = {
						delay		: false,		// каждый символ использует различное время анимации
						speed		: 300,			// скорость анимации
						easing		: 'jswing',		// эффект анимации
						dir			: 'leftright', 	// направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, 
						overlay		: false,		// выскальзывающее слово появляется поверх текущего
						opacity		: true			// анимация прозрачности символов
					};
					
					return this.each(function(){
						
						// Объединение заданных опций со значениями по умолчанию
						if ( options ) {
							$.extend( settings, options );
						}
						
						var $el 			= $(this).addClass('sl-w1'),
							word			= $el.data('hover') || $el.html(); 	// Если атрибут data-hover установлен, используем заданное слово, иначе используем текущее слово
						
						if($el.data('hover')) settings.overlay = false;			// Опция используется только для случая одного и того же слова
						
						$el.lettering();										// используем плагин lettering.js
							
						var	$chars			= $el.children('span').addClass('sl-w1'),
							$tmp 			= $('<span>' + word + '</span>').lettering();
						
						$chars.each(function(i) {
							var $char		= $(this);
							
							$char.wrap( $('<span/>').addClass('sl-wrapper') )	// Устнавливаем контейнер с классом для каждого символа и ширину контейнера равной ширине символа
								 .parent().css({
									width : $char.width() + 'px'
								  });
						});
						
						$tmp.children('span').each(function(i) {
							var $char		= $(this),
								$wrapper 	= $el.children('.sl-wrapper').eq(i);
							
							if($wrapper.length)									// Проверяем наличие контейнера для вставки символа
								$wrapper.prepend( $char.addClass('sl-w2') );
							else {												// Если его нет, создаем
								$el.append(
									$('<span class="sl-wrapper"></span>').prepend( $char.addClass('sl-w2') )
								);
								
								$char.parent().css({
									width : $char.width() + 'px'
								});
							}
							
							if(!$.browser.msie && settings.opacity)
									$char.css('opacity', 0);
							
																		// "скрываем" символ
							if(settings.dir === 'leftright')							
								$char.css('left', - $char.width() + 'px');
							else
								$char.css('left', $char.parent().width() + 'px');		
						});
						
						// События mouseenter / mouseleave - переключаемся на другое слово
						$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
							aux.toggleChars($el, settings);
						});

					});
				}
			}
		};
	
	$.fn.hoverwords = function(method) {
		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Метод ' +  method + ' не существеут в плагине jQuery.hoverwords' );
		}
	};
})(jQuery);