3

为什么这个.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>​

​</p>

4

4 回答 4

6

那是因为您没有将函数传递给animate()- 您正在调用它,并传递它返回的值(这不是函数,随后被框架忽略)。

您必须在函数后删除括号:

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

代替:

$('.spanClass').animate({
    left: '+=200'
}, 500, positionReset());
于 2012-10-22T14:25:49.077 回答
4

应该:

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset); //not positionReset() or you will autocall callback function
});
于 2012-10-22T14:25:56.953 回答
1

因为您通过在函数后面加上括号来调用函数。要传递对函数的引用,您只需使用它的名称,不带括号。例如

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset);
});
于 2012-10-22T14:28:22.090 回答
1

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

演示

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset);
});
于 2012-10-22T14:30:56.540 回答