Javascript 如何在使用rAF操作DOM时平滑动画

客户需要一个连续的旋转木马，它可以处理列表中不同大小的对象（基本上是一个连续的客户标识标签带）。目前，我正在使用

requestAnimationFrame

连续滑动旋转木马

这是你的电话号码

在Firefox中，当列表中的第一个项目移到末尾时，我的动画变得断断续续。有没有更有效的方法

HTML:

JS:（减去英国皇家空军要旨）

function animate（）{
请求动画帧（动画）；
animateNow（）；
}
请求动画帧（动画）；
函数animateNow（）{
var fWidth=parseInt（$（'u#clients_carousel ul li:first'）。outerWidth（true），10）；
var lIndent=parseInt（$（'#clients_carousel ul'）.css（“左”），10；
if（宽度<数学绝对值（林登））{
$（'clients_carousel ul li:last'）。之后（$（'clients_carousel ul li:first'）；
var newIndent=lIndent+fWidth；
$（'#clients_carousel ul'）.css（'left'，newIndent+'px'）；
林登=新缩进；
}
$（'#clients_carousel ul'）.css（“左”，lIndent-1）；
}

<div id="clients_carousel" class="col-md-12 hidden-xs hidden-sm">
  <ul id="scroller" class="clearfix">
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/01/keesler.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/wcd.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/viva.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/magma.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/safe.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/2ndimage.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/balboa1.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/smile.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/nfib.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/dental1-e1424199396391.png" alt=""></li>
  </ul>
</div>

function animate(){
  requestAnimationFrame(animate);
  animateNow();
}

requestAnimationFrame(animate);

function animateNow(){
    var fWidth = parseInt($('#clients_carousel ul li:first').outerWidth(true), 10);
    var lIndent = parseInt($('#clients_carousel ul').css("left"), 10);
    if (fWidth < Math.abs(lIndent)) {
      $('#clients_carousel ul li:last').after($('#clients_carousel ul li:first'));
      var newIndent = lIndent + fWidth;
      $('#clients_carousel ul').css('left', newIndent + 'px');
      lIndent = newIndent;
    }
    $('#clients_carousel ul').css("left", lIndent - 1);
  }