mousemove animation mit übergangsverzögerungen in firefox

Question

Ich habe eine Reihe kleiner Partikel, die ich gerne etwas bewegen würde, wenn sich die Maus bewegt. Ihre Positionen sind relativ zu ihren Eltern. Die Bewegung ist so, wie ich es in Chrom wollte, sehr glatt und subtil, aber in Firefox sehr nachlassend.

This ist die jsfiddle vereinfachte Version von dem, was ich versuche zu tun. Öffne es in Chrome und Firefox und vergleiche die Bewegungen.

Dies ist die Javascript-Code, der jquery mousemove- verwendet()

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

Ich denke, das da mit Übergang von Teilchen zu tun hat, wenn ich Übergangseigenschaften entfernen, sind Animationen das gleiche in beiden Browsern, aber ich brauche diese Übergangszeit und Lockerung wegen einer anderen Bewegung dieser Teilchen. Also irgendwelche Ideen, was das verursachen könnte?

Und auch wenn es etwas komisches oder falsches an meinem Code gibt, fühlen Sie sich frei, es zu korrigieren. Ich bin bestrebt, so schnell wie möglich mehr zu lernen.

Answer 1

Es ist eine magische Funktion, die diese Art von Problemen löst: http://underscorejs.org/#throttle

Oder Sie gehen über request mit wie hier: How to use requestAnimationFrame in mousemove event?

Beispiel mit Drosselung:

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