JQuery動畫回調

我有一個簡單的頁面，使用2個函數來回動畫框：animateLeft和animateRight。當我打電話動畫這種方式，它工作正常：JQuery動畫回調

$("#divTestBox3").animate({ "left" : "200px" }, 1000, animateLeft);

然而，當我把這種方式：

$("#divTestBox3").animate({ "left" : "200px" }, 1000, animateLeft());

功能animateLeft（）不會等到動畫完成之前出現它執行。 animateLeft（）立即被調用，導致堆棧溢出。有人能幫我理解這兩條線的區別，以及它們爲什麼會有不同的表現。

完整的應用程序如下所示。

<head> 
<script src="../JSCommon/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    var stop = false; 

    $(document).keydown(function(event) { 
     stop = !stop; 
     if (!stop) 
     animateRight();   
    }); 

    function animateRight() { 
     if(!stop) { 
     console.log('animateRight'); 
     $("#divTestBox3").animate({ "left" : "200px" }, 1000, animateLeft); 
     } 
    } 

    function animateLeft() { 
     if(!stop) { 
     console.log('animateLeft'); 
     $("#divTestBox3").animate({ "left" : "20px" },1000,animateRight); 
     } 
    }   

}); 
</script> 

</head> 

<body> 
    <div style="height: 40px;"> 
      <div id="divTestBox3" style="height: 20px; width: 20px; left: 20px; background-color: #89BC38; position: absolute;"></div> 
    </div> 
    <p>Press any key to start/stop the animation</p> 
</body>

來源

2011-06-26 Brian Chamberlin

animateLeft

引用是函數本身。

animateLeft()

是呼叫的功能animateLeft不帶任何參數。它評估的是那個函數返回的結果。

來源

2011-06-26 19:09:06 Mat

當您使用...animate(..., animateLeft())時，這將取animateLeft函數的結果並將其作爲參數傳遞（這是它立即執行的原因）。當您使用...animate(..., animateLeft)時，它會將函數本身作爲參數傳遞給。在後一種情況下，jQuery使用該函數作爲完成處理程序，因此將在動畫完成時調用它。

來源

2011-06-26 19:10:56 jtbandes

當您通過animateLeft時，它指的是一個函數。但是當你通過animateLeft()時，它指的是結果這個函數，所以當你調用animate()時立即執行。

來源

2011-06-26 19:11:25 user514529

JQuery動畫回調

回答

相關問題