a/20160150/1636522 (2)

by wared

HTML

<div>A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. <a href="#">Replay</a></div>

CSS

*{font-family:Verdana;font-size:20px}

JavaScript

jQuery(function init($) {
	var items = findTextNodes($('div').get(0));
	
	(function (item) {
		if (item = items.shift()) {
			write(item.node, item.text, arguments.callee);
		}
	})();
	
	$('a').one('click', function (e) {
		e.preventDefault();
		init($);
	});
});

function findTextNodes(node) {
	var result = [],
		i = 0,
		child;
	while (child = node.childNodes[i++]) {
		if (child.nodeType === 3) {
			result.push({
				node: child,
				text: child.nodeValue
			});
			child.nodeValue = '';
		} else {
			result = result.concat(
				findTextNodes(child)
			);
		}
	}
	return result;
}

function write(node, text, fn) {
	var i = 0;
	setTimeout(function () {
		node.nodeValue += text[i++];
		if (i < text.length) {
			setTimeout(arguments.callee, 50);
		} else {
			fn();
		}
	}, 50);
}