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

为什么在动画开始之前，此

.animate

函数的回调会发生

参考：

这是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>​

A.
B
C


单击按钮
​

---

​

这是因为您没有将函数传递给

animate（）

——您正在调用它，并传递它返回的值（该值不是函数，随后被框架忽略）

您必须删除函数后的括号：

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

而不是：

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

应该是：

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

---

因为您是通过在函数后面加括号来调用函数的。要传递对函数的引用，只需使用函数名，不带括号。e、 g

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

positionReset（）

将调用函数作为函数调用。您需要将函数对象作为

positionReset

见

---

请注意，对于调用

positionReset（）

后可能需要执行其他操作的情况，也可以使用类似于

function（）{positionReset（）；}

的匿名函数

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