javascript - 新しく追加された要素の位置へのJqueryスクロール要素（親への相対オフセットの計算）

Question

要素の水平リストを作成しました。リストの幅は固定で、オーバーフローするとスクロールします。ボタンをクリックすると、新しい要素がこのリストに追加され、ul 要素をこの新しく作成された li 要素にスクロールしようとしています。

私が使用しているJQueryは次のとおりです。

var ul = $('ul')  

$('button').click(function() {
    var li = $('<li></li>');

    ul.append(li);

    ul.stop().animate({
        scrollLeft: li.offset().left
     }, 2000);
});

奇妙なことに、トレースを開始すると、変数li.offset().leftは最初のいくつかの要素でほぼ同じ値のままになり、スクロールは最大値li.offset().left未満になるまで正常に機能します。ul.scrollLeft()

ここでこれを見ることができます：http://jsfiddle.net/ePrwZ/16/

li.offset().left親の ul 要素に対して必要なときに、ドキュメントに対する相対的な位置を追跡しているようです。しかし、オーバーフローのために親のオフセットを差し引くことはできません。これを計算する方法について何か考えはありますか？

注：ulの最後だけでなく、特定の要素までスクロールしたいと思います。