a/20722172/1636522

by wared

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery.fn.marquee = function ($) {

	function findTextNodes(node) {
		var result = [],
			i = 0,
			child;
		while (child = node.childNodes[i++]) {
			if (child.nodeType === 3) {
				result.push(child);
			} 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);
	}
	
	return function (html) {
		var fragment, textNodes, text;
		fragment = $('<div>' + html + '</div>');
		textNodes = findTextNodes(fragment[0]);
		text = $.map(textNodes, function (node) {
			var text = node.nodeValue;
			node.nodeValue = '';
			return text;
		});
		this.each(function () {
			var clone = fragment.clone(),
				textNodes = findTextNodes(clone[0]),
				i = 0;
			$(this).append(clone.contents());
			(function next(node) {
				if (node = textNodes[i]) {
					write(node, text[i++], next);
				}
			})();
		});
        return this;
	};
}(jQuery);
</script>
<script>
jQuery(function init($) {
    
    var html = 'A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. <a href="#">Replay</a>';
    $('p').marquee(html);
	
	$('a').click(function (e) {
		e.preventDefault();
        $('p').empty();
        $('a').off('click');
		init($);
	});
});

</script>
<p></p>
<p></p>

CSS

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