Эффект перекрашивания текста для любого текстового блока

text-fx.js

/**
 * Эффект для любого текстового блока.
 * При наведении мышки на текст перекрашиваем его посимвольно.
 * При отведении перекрашиваем обратно.
 * В стилях блока необходимо настроить вид текста в теге <em>,
 * он используется для разметки среднего участка.
 *
 * @author MaximAL
 * @since 2015-05-15
 * @copyright © MaximAL, Sijeko 2015
 */
(function ($) {
	/**
	 * Элемент, с которым делаем эффект.
	 * @type {jQuery|*}
	 */
	var fxElement = $('.b-sijeko');

	/**
	 * Таймаут таймера в миллисекундах. Чем меньше, тем быстрее происходит эффект.
	 * @type {number}
	 */
	var timeout = 100;

	/**
	 * Таймер
	 * @type {number|null}
	 */
	var timerId = null;

	/**
	 * Текст элемента
	 * @type {string}
	 */
	var text = $.trim(fxElement.text());

	// Проверка валидности текста
	if (text.indexOf('<') !== -1 || text.indexOf('>') !== -1) {
		console && console.warn('Sijeko Warn: Текст элемента для эффекта не должен содержать символов `<` и `>`.');
		return;
	}

	// Длина текста
	var halfLen = parseInt(text.length / 2);
	// Если текст содержит чётное количество букв, делаем на одну итерацию меньше
	var diff = 1 - text.length % 2;
	// Счётчик букв
	var i = 1;

	// На каждом тике таймера разбиваем текст на кусочки и средний оборачиваем в <em>.
	// При наведении мышки (mouseenter) средний кусочек растёт на два символа за раз.
	// При отведении мышки (mouseleave) средний кусок уменьшается с той же скоростью.
	fxElement.on('mouseenter', function (event) {
		if (event.target != event.currentTarget) {
			return;
		}
		i = (i < 1) ? 1 : i;
		// Отключаем таймер, если он запущен
		timerId && clearInterval(timerId);
		timerId = null;
		// На каждой итерации разбиваем текст на кусочки и средний оборачиваем в <em>
		// При этом размер среднего кусочка увеличивается на два символа за раз.
		timerId = setInterval(function () {
			if (i > halfLen - diff) {
				timerId && clearInterval(timerId);
				timerId = null;
			}
			// Разбиение текста по четырём точкам: начало строки, середина - i, середина + i, конец строки
			fxElement.html(
				text.substring(0, halfLen - i) +
				'<em>' + text.substring(halfLen - i, halfLen + i) + '</em>'
				+ text.substring(halfLen + i, text.length)
			);
			//console.log(i, fxElement.html());
			i++;
		}, timeout);
	}).on('mouseleave', function () {
		//var i = halfLen;
		i = (i > halfLen - diff) ? halfLen - diff : i;
		// Отключаем таймер, если он запущен
		timerId && clearInterval(timerId);
		timerId = null;
		timerId = setInterval(function () {
			if (i === 0) {
				// Таймер отключаем, текст по умолчанию
				timerId && clearInterval(timerId);
				timerId = null;
				fxElement.html(text);
			} else {
				// Разбиение аналогично наведению
				fxElement.html(
					text.substring(0, halfLen - i) +
					'<em>' + text.substring(halfLen - i, halfLen + i) + '</em>'
					+ text.substring(halfLen + i, text.length)
				);
			}
			//console.log(i, fxElement.html());
			i--;
		}, timeout);
	});
})(jQuery);