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

Question

Why is the callback on this .animate function happening, before the animation?

Refer: http://jsfiddle.net/93Qyq/7/

This is the Javascript portion:

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

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

This is the 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

That's because you're not passing your function to animate() -- you're calling it , and passing the value it returns (which is not a function, and is subsequently ignored by the framework).

You have to remove the parentheses after your function:

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

Instead of:

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

Answer 2

Should be:

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

Answer 3

Because you are invoking the function by putting brackets after it. To pass a reference to the function you just use it's name, without the brackets. eg

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

Answer 4

positionReset() will call the function as its a function call. You need to pass the function object to the animate callback as positionReset

See THE DEMO

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