$(document).ready(function () {

    $('.primarynav ul li a').append('<div class="line"></div>');
    $('.primarynav ul li a .line').css({
        display: 'block',
        height: '1px',
        background: '#212121',
        position: 'absolute',
        top: '12px',
        left: '0px',
        opacity: 0
    });

    $('.primarynav ul li a').hover(
        function () {
            //alert('on');
            line = $(this).find('.line');
            line.css({
                width: $(this).width()
            });
            
            slideLine(line, 18, 1);

        },
        function () {
            //alert('off');

            slideLine(line, 12, 0);

        }
    );

    function slideLine(line, toppx, opacity) {
        line.stop().animate({
            top: toppx + 'px',
            opacity: opacity
        }, 200);
    }

});