为什么jQuery .animate回调发生在动画之前？

Question

为什么在动画之前会发生这个.animate函数的回调？

参考：http://jsfiddle.net/93Qyq/7/

这是Javascript部分：

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset());
});

function positionReset(){
    alert('complete!');
   $('.spanClass').animate({'left':'-=200'})
}

这是HTML：

<div class="divClass">
<span id="a" class="spanClass">A</span>
<span id="b" class="spanClass">B</span>
<span id="c" class="spanClass">C</span>
</div>
<br>
<div id="clickButton">CLICK BUTTON</div><br>​

Answer 1

那是因为你没有将你的功能传递给animate() - 你是调用它，并传递它返回的值（这不是一个函数，随后被框架忽略。

您必须在功能后删除括号：

$('.spanClass').animate({
    left: '+=200'
}, 500, positionReset);  // No parentheses.

而不是：

$('.spanClass').animate({
    left: '+=200'
}, 500, positionReset());

Answer 2

应该是：

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset); //not positionReset() or you will autocall callback function
});

Answer 3

因为您通过在其后面放置括号来调用该函数。要传递对函数的引用，只需使用它的名称，不带括号。 e.g。

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset);
});

Answer 4

positionReset()将函数调用为函数调用。您需要将函数对象传递给动画回调，如positionReset

请参阅DEMO

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset);
});