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