JQ(document).ready(function() {

	/* 	1st example	*/

	// wrap inner content of each anchor with first layer and append background layer
	JQ("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

	// loop each anchor and add copy of text content
	JQ("#menu li a").each(function() {
		JQ( '<span class="over">' +  JQ(this).text() + '</span>' ).appendTo( this );
	});

	JQ("#menu li a").hover(function() {
		// this function is fired when the mouse is moved over
		JQ(".out",	this).stop().animate({'top':	'45px'},	250); // move down - hide
		JQ(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
		JQ(".bg",	this).stop().animate({'top':	'0px'},		120); // move down - show

	}, function() {
		// this function is fired when the mouse is moved off
		JQ(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
		JQ(".over",	this).stop().animate({'top':	'-45px'},	250); // move up - hide
		JQ(".bg",	this).stop().animate({'top':	'-45px'},	120); // move up - hide
	});
			

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

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

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

});