Jquery.animateを使用してスムーズなrequestAnimationFrame？

とJqueryのanimate()を使用してdivを右に繰り返し移動しようとしています。しかし、私のdivは、連続的に移動するのではなく、吃音に見えます。どのようにそれは開始と停止を続けますか？Jquery.animateを使用してスムーズなrequestAnimationFrame？

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();

出典

2016-03-22 MarksCode

なぜあなたはrAF' 'と' .animateを（） '結合したいのでしょうか？ '.animate（）'メソッドを使うだけで問題はありましたか？ –

アニメーションフレームでそのdiv以上のアニメーションを作成したい場合はどうすればよいですか？ – MarksCode

ええと、それでも私の見解では、それは実際には良い組み合わせにはならない。 '$（ '＃myDIV'）'は現在、あなたに1つの要素を返します。代わりにクラスセレクタを渡すこともできますし、複数の要素をアニメーション化することもできます。 –

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


    updateFrame();

使用left: 1pxの代わり25pxその後、アニメーションspeedを使用：これを試してみてください。

jsFiddle

出典

2016-03-22 05:57:13 Pedram

それはうまくいくようです、ありがとう！ – MarksCode

Jquery.animateを使用してスムーズなrequestAnimationFrame？

答えて

関連する問題