$(function(){  
  
	$('#navigation li a').append($('<span class="hover"></span>').css("opacity", "0"));  
	// span whose opacity will animate when mouse hovers. 
	
	$('#navigation li a.active .hover').stop().animate ({
			'opacity': 1  
			}, 800, 'easeOutQuad');
	
	$('#navigation li a').hover(function() { 
		$('#navigation li a.active .hover').stop().animate ({
			'opacity': 0  
			}, 800, 'easeOutQuad');
		
		
		 $('.hover', this).stop().animate({  
		'opacity': 1  
		}, 400,'easeInQuad')  
	},
	
	function() {  
		$('.hover', this).stop().animate({  
		'opacity': 0  
		}, 800, 'easeOutQuad');
		
		$('#navigation li a.active .hover').stop().animate ({
			'opacity': 1  
			}, 800, 'easeOutQuad');
  
	})  
	
});