.net link swipe effect

HTML:

<ul> 
	<li><a href="#">News</a></li> 
	<li><a href="#">Showcase</a></li> 
	<li><a href="#">Events</a></li> 
	<li><a href="#">Discussions</a></li> 
	<li><a href="#">Jobs</a></li> 
	<li><a href="#">Opportunities</a></li> 
	<li><a href="#">Directory</a></li> 
</ul>
        

CSS:

div#nav ul {
    display: inline;
    float: left;
    width: 360px;
    text-transform: uppercase;
    font-size: 17px;
    line-height: 17px;
}
    div#nav ul li {
        width: 140px;
        height: 20px;
        margin: 0 10px 0 0;
        *margin-left: -16px;
        overflow: hidden;
        clear: left;
    }
        div#nav ul li a {
            display: inline;
            color: #000;
            background: #fff;
            padding: 3px 2px 1px 2px;
            position: relative;
            overflow: hidden;  
            text-decoration: none;
            *display: inline-block;
            *padding: 2px;     
        }
            body.isSafari div#nav ul li a {
                display: inline-block;
                padding: 2px;
            }
            div#nav ul li a span {
                position: absolute;
                left: 0;
                top: 3px;
                display: block;
                color: #fff;
                background: #000;
                padding: 3px 2px 1px 2px;
                overflow: hidden;
                white-space: nowrap;
                *padding: 2px;
                *top: 0;
                *cursor: pointer;
            }
                body.isSafari div#nav ul li a span {
                    padding: 2px;
                    top: 0;
                }
            div#nav ul li.current a {
        			  background: #000;
          			color: #fff;
        		}
        		    div#nav ul li.current span {
            			  display: none !important;
            		}
        

Javascript

function hoverAnim() {    
    $("#nav li a, #footer .social a").each(function(i) {
        // make the iteration object a jquery object
        var a = $(this);
        var animating = false;
        // grab the text and width
        var title = a.html();
        var w = a.width();
        // append a span with the content in, to mask over the link      
        a.append("<span class='mask' style='width: 0px; display: none'>"+title+"</span>");
        // do the hover funcs
        a.hover(function(){
            // stop the flicker!
    	    a.find("span").stop(true,true);
    	    //
            a.find("span").show();
            a.find("span").animate({
              width: w+'px'
            }, 200, function(){ 
                animating = false;                          
            });
    	}, function() {
            a.find("span").animate({
              width: '0px'
            }, 400, function(){ 
                a.find("span").hide();
                animating = false;                        
            });
    	});
    });    	
}