jQuery(document).ready(function() {
/* 	1st example	*/

			/// wrap inner content of each anchor with first layer and append background layer
			jQuery("#menu li a").wrapInner( '<span class="out"></span>' );
			jQuery("#menu li a").each(function() {
				jQuery( '<span class="over">' +  jQuery(this).text() + '</span>' ).appendTo( this );
			});
			jQuery("#menu li a").hover(function() {
				jQuery(".out",	this).stop().animate({'top':	'30px'},	250); // move down - hide
				jQuery(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show

			}, function() {

				jQuery(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
				jQuery(".over",	this).stop().animate({'top':	'-30px'},	250); // move up - hide
			});

					/*	2nd example	*/

			jQuery("#menu2 li a").wrapInner( '<span class="out"></span>' );
			jQuery("#menu2 li a").each(function() {
				jQuery( '<span class="over">' +  jQuery(this).text() + '</span>' ).appendTo( this );
			});

			jQuery("#menu2 li a").hover(function() {
				jQuery(".out",	this).stop().animate({'top':	'30px'},	200); // move down - hide
				jQuery(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				jQuery(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				jQuery(".over",	this).stop().animate({'top':	'-30px'},	200); // move up - hide
			});

		});