Animated underline menu

HTML

<nav id="main-navigation">
    <a class="selected" href="#">Home</a>
    <a href="#">Reviews</a>
    <a href="#">Videos</a>
    <a href="#">Photossdvadvadv</a>
</nav>

CSS

#main-navigation{
    margin: 0 auto;
    position: relative;
    font-family: arial;
}

#main-navigation a{
    color: #aaa;
    font-size: 14px;
    margin: 6px 10px 4px 10px;
    text-decoration: none;
    text-transform: uppercase;
    display:inline-block;
}

#main-navigation a:hover{
    color: black;
}

.underline{
    position: absolute;
    bottom: -2px;
    left: 10px;
    width: 100px;
    height: 2px;
    background: #f00;
}

JavaScript

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#main-navigation");
    
    $mainNav.append("<span class='underline'></span>");
    var $underline = $(".underline"),
        $selected = $('.selected'),
        selectedWidth = $selected.width(),
        selectedOuterWidth = $selected.outerWidth(true),
        selectedPos = (selectedOuterWidth-selectedWidth)/2
    ;
    
    $underline
        .width(selectedWidth)
        .css("left", $selected.position().left+selectedPos)
        .data("origLeft", $underline.position().left)
        .data("origWidth", $underline.width());
        
    $("#main-navigation a").click(function() {
        $el = $(this);
        leftPos = $el.position().left+selectedPos;
        newWidth = $el.width();
        $underline.stop().animate({
            left: leftPos,
            width: newWidth
        }, 300);
    }, function() {
        $underline.stop().animate({
            left: $underline.data("origLeft"),
            width: $underline.data("origWidth")
        }, 300);    
    });
});