jQuery animation along a straight line

HTML

<div id="left">
<span class="tray">abc</span><div class="score">+60</div><br/>
<span class="tray">abc</span><div class="score">+60</div><br/>
<span class="tray">abc</span><div class="score">+60</div><br/>

</div>

<div id="right">
hello
<span class="line"></span><br/>
</div>

CSS

#left {
    float:left;
}

#right {
    float:right;
}

.score {
    display:inline-block;
}
.line{
  display: block;
  width: 30px;
  margin- top: 100px;
  border-bottom: 1px solid black;
  float: right;
}

JavaScript

var scoreSelector = '.score:eq(1)';
var scorePosition = $( scoreSelector ).position();
var rightPosition = $( '#right' ).position();
$( scoreSelector ).css('position', 'absolute');
alert( scorePosition.left + ' ' + scorePosition.top );


$( scoreSelector ).animate({"left": rightPosition.left, "top": rightPosition.top}, "slow");
$