mousemoveのアニメーションは、ファイアウォールで遷移が遅れます

Question

マウスを動かすと少し動きたい小さな粒子がたくさんあります。彼らのポジションは両親に関連している。動きは、私がクロームでしたい、非常に滑らかで微妙ですが、ファイアフォックスではかなり遅れています。

Thisは、私がやろうとしていることのjsfiddle簡略化されたバージョンです。クロムとファイアフォックスの両方で開き、動きを比較してください。

私はトランジションのプロパティを削除する場合は、この私は、これは、粒子の移行に関係していると思いますjqueryののMouseMoveを使用しているJavaScriptコード（）

var centerX = window.innerWidth/2, 
    centerY = window.innerHeight/2; 

    $('body').mousemove(function(e){ 
    var clientX = e.clientX, 
     clientY = e.clientY, 
     amountMovedX = (centerX - clientX)/20, 
     amountMovedY = (centerY - clientY)/20; 
    if(clientX > centerX){ 
    amountMovedX *= -1; 
    } 

      $('#rect1').css('transform','translate3d('+amountMovedX*1.1+'px,'+amountMovedY+'px, 0) rotate(-15deg)'); 
        $('#rect2').css('transform','translate3d('+amountMovedX*1.8+'px,'+amountMovedY*1.4+'px, 0)'); 
        $('#rect3').css('transform','translate3d('+amountMovedX*0.8+'px,'+amountMovedY*1.9+'px, 0) rotate(30deg)'); 
        $('#rect4').css('transform','translate3d('+amountMovedX*1.6+'px,'+amountMovedY*0.7+'px, 0)'); 

        $('#rect5').css('transform','translate3d('+amountMovedX*-1.7+'px,'+amountMovedY*1.1+'px, 0) rotate(30deg'); 
        $('#rect6').css('transform','translate3d('+amountMovedX*-0.8+'px,'+amountMovedY*1.9+'px, 0)'); 
        $('#rect7').css('transform','translate3d('+amountMovedX*-1.3+'px,'+amountMovedY*0.9+'px, 0) rotate(-30deg'); 
        $('#rect8').css('transform','translate3d('+amountMovedX*-0.5+'px,'+amountMovedY*1.5+'px, 0) rotate(-15deg)'); 
     }); 

であるがために、アニメーションは、両方のブラウザで同じですが、私は必要これらの粒子の他の動きのために、この遷移時間および緩和をもたらす。これを引き起こす可能性のあるアイデアは何ですか？

また、自分のコードについて何か変わったことや間違っているものがある場合は、それを修正してください。私はできるだけ早くもっと学びたいと思っています。

Answer 1

問題のこれらの種類を解く魔法の機能があります： http://underscorejs.org/#throttle

それとも、ここのようにrequestAnimationFrameのを使って行くことができます。 How to use requestAnimationFrame in mousemove event?

例をスロットルで：まあ

var th=_.throttle(function(opts){//opts={x:...,y:...} 
//do your stuff here 
},100); 

$(document).on('mousemove',function(e){ 
th({x:e.pageX,y:e.pageY}); 
});