使用 Jquery.animate 平滑 requestAnimationFrame？

Smooth requestAnimationFrame using Jquery.animate?

我正在尝试使用 requestAnimationFrame 和 Jquery 的 animate() 重复将 div 向右移动。但是，我的 div 似乎是结结巴巴的，而不是连续移动。怎么一直开停？

Here is a JSfiddle of my implementation

如果你只想在这里看到我的代码是 html:

<body>
  <div id="back">
    <div id="myDiv">
    </div> 
  </div>
</body>

css:

#myDiv {
  height: 50px;
  width: 50px;
  background-color: black;
  position: absolute;
}

#back {
  height: 200px;
  width: 200px;
  background-color: teal;
}

和 javascript:

  function updateFrame(){
      $("#myDiv").animate({left: '+=25px'}, function(){
        window.requestAnimationFrame(updateFrame);
      });
    }


  updateFrame();

试试这个：

  function updateFrame(){
      $("#myDiv").animate({left: '+=1px'}, 10, function(){
        window.requestAnimationFrame(updateFrame);
      });
    }


  updateFrame();

使用 left: 1px 而不是 25px 然后使用动画 speed.

jsFiddle