animate的回调函数(完成)在开始时执行？

Question

我正在使用jQuery 1.5.1这是我的代码:

$('.cellcontent').animate({
   left: '-=190'}, {
   easing: alert('start ani'),
   duration: 5000,
   complete: alert('end ani')});

动画开始前我都收到了警报!？我希望在动画结束后启动完整的功能.有什么想法吗？

Answer 1

你需要传递一个函数来调用.相反,你正在调用该函数.

complete:  function() { alert('end ani'); } 

Answer 2

我发现这有两个问题.

一,easing应该是:

一个字符串,指示要用于转换的缓动函数

而且complete应该是一个功能.

http://api.jquery.com/animate

alert('start ani');
$('.cellcontent').animate({
     left: '-=190'
   },
   {
     easing: 'swing',
     duration: 5000,
     complete: function(){
        alert('end ani');
    }
});

Answer 3

您需要传递一个功能才能完成.

试试这个:

$('.cellcontent').animate({
    left: '-=190'}, {
    easing: alert('start ani'),
    duration: 5000,
    complete: function() { alert('end ani') }
});

由于complete需要一个函数,它会执行你传递给它的代码,以获得一个函数对象,它可以在完成时回调.

Answer 4

最好的解决办法是这样。

$('.cellcontent').animate({
    left: '-=190'}, {
    easing: alert('start ani')
}, duration).promise().done(function () {
     alert('end animation');
});

Answer 5

来自jquery 文档：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
   left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});