多個對象沒有擺動，保持凍結

我試圖讓這兩個對象擺動，當我將它們移動時。獨立。所以，當我將鼠標懸停在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/

在此先感謝球員:)

來源

2014-03-28 MarkP

問題是變量昂，黨，ddAng = 0.5，DIR ，用於每一個onmouseover函數調用，嘗試類似的東西

(function(){ 

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

swing(box);swing(box2); 

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

function setAng(ang){ 
    box.style.WebkitTransform = 'rotate('+ang+'deg)'; 
    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)); 
}; 

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

}; 
}())

編輯我測試創建簡單的網頁以外的jsfiddle這個代碼，它的工作原理，下面是我的html頁面

<!DOCTYPE html> 

<html lang="en"> 
<head>   
    <meta charset="utf-8" /> 
    <title></title> 

    <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> 
</head> 
<body> 
    <div id="box" class="box"> 
     <div class="pin"></div> 
    </div> 

    <div id="box2" class="box2"> 
     <div class="pin2"></div> 
    </div> 
    <script type="text/javascript"> 
     (function() { 

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

      swing(box); swing(box2); 

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

       function setAng(ang) { 
        box.style.WebkitTransform = 'rotate(' + ang + 'deg)'; 
        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)); 
       }; 

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

      }; 
     }()); 

    </script> 
</body>

來源

2014-03-28 18:14:09

嘿，這似乎當我在的jsfiddle用它來工作，但它確實不是在我將其部署到網站時。我得到這個錯誤：Uncaught ReferenceError：框未定義。這裏發生了什麼？ – MarkP

嗨@MarkP，我做了一個簡單的HTML頁面（上面的HTML代碼）的測試，它的工作原理，請檢查你有容器「box1」和「box2」後的JavaScript代碼 –

你已經忘了設置「功能（）」中的setTimeout （）

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

}

它現在在你搗鼓「盒子」

來源

2014-03-28 19:08:43

多個對象沒有擺動，保持凍結

回答

相關問題