javascript - 动画完成后如何运行jquery函数？

Question

所以我对 javascript 和 jquery 很陌生。需要有关如何在第一个函数完成后运行第二个函数的帮助吗？ 第一个功能是进度条，第二个功能是我想在进度条动画完成后淡入的表单。

脚本:

$(function() {
  var msecsPerUpdate = 1000 / 60; // # of milliseconds between updates, this gives 60fps
  var progress = $('progress');
  var duration = 1; // secs to animate for
  var interval = progress.attr('max') / (duration * 1000 / msecsPerUpdate);

  var animator = function() {
    progress.val(progress.val() + interval);
    if (progress.val() + interval < progress.attr('max')) {
      setTimeout(animator, msecsPerUpdate);
    } else {
      progress.val(progress.attr('max'));
    }
  }

  $('a#forgot').click(animator);
});

$(function(e) {
  e.preventDefault();
  $('generator#forgot').css('bottom', '5px');
  $(this).fadeOut('medium', function() {
    $('a#back').fadeIn();
  });

});

提前致谢!

Answer 1

我会向您的 animator 函数添加一个回调函数，使其看起来像这样:

var animator = function(callback) {
  progress.val(progress.val() + interval);
  if (progress.val() + interval < progress.attr('max')) {
    setTimeout(animator, msecsPerUpdate);
  } else {
    progress.val(progress.attr('max'));
    callback();
  }
}

然后你可以这样调用它:

$('a#forgot').click(function() {
  animator(function() {
    console.log('this runs after your animation has completed');
  }); 
});

注意:这是一个简化的代码片段，没有您可能想要添加的参数或错误处理。