javascript - 多个物体不摆动，保持卡住

Question

当我将鼠标悬停在这两个对象上时，我试图让它们摆动。独立。所以，当我将鼠标悬停在 box1 上时，它会摆动，然后当我远离它时，它会慢慢停止摆动。然而他们俩似乎都僵住了。

谁能明白原因并帮我解决它吗？

这是我的 Js:

(function swing() {
    var ang  = 20,
    dAng = 10,
    ddAng = .5,
    dir  = 1,
    box = document.getElementById("box");

function setAng(ang,div){

if (div == "box") {

    document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';

    document.getElementById("box").style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;

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

}

if (div == "box2") {

    document.getElementById("box2").style.WebkitTransform =  'rotate('+ang+'deg)';

    document.getElementById("box2").style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;

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

}
};


document.getElementById("box").onmouseover = function(){
    var div = document.getElementById("box");
    document.getElementById("box").style.WebkitTransform =  'rotate(-20deg)';
    document.getElementById("box").style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(20, "box")
    }, 1000);
}

document.getElementById("box2").onmouseover = function(){
    var div = document.getElementById("box2");
    document.getElementById("box2").style.WebkitTransform =  'rotate(-20deg)';
    document.getElementById("box2").style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(20, "box2")
    }, 1000);
}


})();

这是 JSFiddle:http://jsfiddle.net/z3s7v/1/

提前谢谢大家:)

Answer 1

您忘记在 setTimeout() 中设置“function()”

function setAng(ang,div){

if (div == "box") {
    document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';   
    document.getElementById("box").style.MozTransform =  'rotate('+ang+'deg)';
    //document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';

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

    if (Math.abs(ang) > 0) {  
        // Here you have forgot "function()"
        setTimeout(function(){
        setAng(dir * (Math.abs(ang)-dAng), div)
        }, 1000);              
    }

}

它现在可以在你拨弄“盒子”时起作用