动画完成后如何运行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');
  }); 
});

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