摆动的物体抽搐不平滑

Question

如果你看过我最近的帖子，你可能知道我一直在研究摆动物品。在添加更多对象之后，我现在似乎已经遇到的问题是它们在摆动时似乎是抽搐的。如果我只悬停在一个上面，它运行正常。但是当我将鼠标悬停在它们上面时，它似乎就会相互作用。

以下是完整代码：

(function(){

 var box=document.getElementById('box');box2=document.getElementById('box2');box3=document.getElementById('box3');box4=document.getElementById('box4');

swing(box);swing(box2);swing(box3);swing(box4);

var eventFired = 0;

function swing(box) {
var ang  = 20,
   dAng = 10,
   ddAng = 3,
   dir  = 1;

function setAng(ang){
box.style.WebkitTransform =  'rotate('+ang+'deg)';
box.style.MozTransform =  'rotate('+ang+'deg)';

console.log('The ang is: ', ang);
console.log('Event Fired: ', eventFired);



dir = -dir;
if (dAng > 1) {
    dAng -= ddAng; }

if (Math.abs(ang) > 0) {
    var timeOUTid = setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng)); }

    eventFired++;
};

box.onmouseover = function(){  

if(typeof timeOUTid >= "0") {

    console.log(timeOUTid);

  window.clearTimeout(this.timeOUTid);
  delete this.timeOUTid;
}

box.style.WebkitTransform =  'rotate(-20deg)';
box.style.MozTransform =  'rotate(-20deg)';
var timeOUTid = setTimeout(function(){
    setAng(ang)
}, 1000);
}

};
}())

有没有办法让它们平稳，也许不会影响彼此或者一次运行它然后停止？

干杯球员