JS marquee / ticker使用requestAnimationFrame未正确触发

Question

我正在尝试构建自己的JS无限滚动条/选框。这个想法很简单......

1. 获取ul
中第一项的宽度
2. 为选框ul设置第一项的宽度
的动画
3. 一旦完成，删除第一个项目并添加到最后，然后一遍又一遍地执行相同操作。

我正在使用requestAnimationFrame在动画结束时计算，然后再次重新触发过程，但它似乎“触发”的时间似乎与项目的宽度不匹配。我哪里错了？

https://codepen.io/anon/pen/ooYvZw

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
    })();

var $marquee = $('footer.marquee ul'),
    $marqueeContents = $marquee.children();

//scroller.append(marqueeContents.clone()).append(marqueeContents.clone());

(function marquee(){
    requestAnimationFrame(marquee);
    var li = $marqueeContents.eq(0),
        liWidth = li.outerWidth();
    console.log(liWidth);
    $marquee.animate({'left': -liWidth}, 5000, 'linear', function() {
        $marquee.css({'left': 0}).find("li:last").after($marquee.find("li:first"));
    });
})();