$(function(){
	$('#main-nav li a').append('<span class="main-nav-hover"></span>');
  // span whose opacity will animate when mouse hovers.

	$('#main-nav li a').hover(
  	function() {
	  	$('.main-nav-hover', this).stop().animate({
				'opacity': 1
		}, 300,'easeOutSine')
   },
    function() {
	  	$('.main-nav-hover', this).stop().animate({
				'opacity': 0
		}, 500, 'easeOutQuad')
	})
})