Pürüzsüz istekAnimasyonJquery.animate kullanarak çerçeve?

requestAnimationFrame ve Jquery'nin animate()'u kullanarak bir divayı tekrar sağa kaydırmaya çalışıyorum. Ancak, benim div sürekli hareket etmek yerine kekeliyor gibi görünüyor. Nasıl başlıyor ve duruyor?Pürüzsüz istekAnimasyonJquery.animate kullanarak çerçeve?

<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; 
}

Ve javascript:

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


    updateFrame();

kaynak

2016-03-22 MarksCode

neden 'rAF' ile' .animate() 'birleştirmek isteyeyim? sadece '.animate()' yöntemini kullanarak bir sorun mu vardı? –

Animasyon çerçevesindeki bu div'den daha fazlasını animasyon etmek istersek ne olur? – MarksCode

hmm, hala benim görüşüme göre kombinasyon için iyi bir durum koymuyor. '$ ('# myDIV')' şu anda size bir öğe döndürüyor. Bunun yerine bir sınıf seçiciyi (veya değil) geçebilir ve birden çok öğeyi animasyon edebilirsiniz. –

Here is a JSfiddle of my implementation

burda ki kodu görmek istiyorsanız

html bu deneyin:

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


    updateFrame();

kullanım left: 1px yerine 25px sonra speed animasyon kullanın.

jsFiddle

kaynak

2016-03-22 05:57:13 Pedram

Bu işe yarıyor, teşekkürler! – MarksCode

Pürüzsüz istekAnimasyonJquery.animate kullanarak çerçeve?

cevap

İlgili konular