Animated Selected Row Indicator

HTML

<div class="container">
    <div class="box">
        box1
    </div>
    <div class="box selected">
        <p>Some Text</p>
        <p>A few paragraphs</p>
        <p>To increase box size</p>
        <p>Some foo text</p>
        <p>Some bar text</p>
    </div>
    <div class="box">
        box3
    </div>
    <div class="box">
        box3
    </div>
    <div class="box">
        box3
    </div>
    <div class="box">
        box3
    </div>
    <div class="box">
        When the poet-king, Ucaf Uddaul, celebrates the charms of the queen of Ahmehnagara, he speaks thus: "Her shining tresses, divided in two parts, encircle the harmonious contour of her white and delicate cheeks, brilliant in their glow and freshness.
    </div>
    
    <div>

CSS

div.box {
    padding:5px 5px;
    padding-left:10px;
    border-left: 2px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;    
    border-right: 1px solid #e7e7e7;    
}

div.box:first-child {
    border-top: 1px solid #e7e7e7;    
}

div.box.selected, div.slideline {
    border-left: 2px solid #4D90F0;
    background-color: #ff7654;
}

div.slideline {
    position: absolute;
    width:1600px;       
    opacity: .9;
}

JavaScript

$('div.box').bind('click', function() {
    var line = $('<div class="slideline"></div>'),
        source = $(this).siblings('div.box.selected'),
        target = $(this);


    /* Set sliding line hight + position */
    
    line.height(source.outerHeight());
    line.css('left', source.position().left);
    line.css('top', source.position().top);

    /* Append the slideline to the body */
    $('body').append(line);

    source.removeClass('selected');

    /* Do the slide animation */
    line.animate({
        top: target.position().top,
        height: target.outerHeight()
    }, 'fast', 'swing', function() {
        target.addClass('selected');
        line.remove();
    });



});