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动画回调

回答

相关问题