javascript - アニメーションの完了後にjquery関数を実行するにはどうすればよいですか?

原文 javascript jquery animation jquery-animate

だから私はjavascriptとjqueryが初めてです。 1つ目の関数が完了した後で2つ目の関数を実行する方法についてヘルプが必要ですか?
最初の関数はプログレスバーで、2番目の関数は、プログレスバーアニメーションの完了後にフェードインするフォームです。

スクリプト:



$(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();
  });

});





前もって感謝します!
答え
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');
  }); 
});


注:これは、パラメーターやエラー処理のない単純化されたコードスニペットであり、追加したい場合があります。
関連記事

javascript - 毎回コマンドを実行せずにCSSの変更を確認する方法

javascript - Jqueryで読み込まれたページのURLを変更する

javascript - ng-repeat内のng-modelの設定が機能しない

javascript - 1つのソースのみからイベントを抽出する方法

javascript - ng-repeat内で呼び出されたAngular $ broadcastが複数回起動する

javascript - session.lastAccessedTimeをJavaScript日付オブジェクトに変換します

javascript - javascript 4ボタン、2動作

javascript - ExpressおよびCheerio / JSDOM

javascript - ifが機能しない場合のclearInterval

javascript - ReactJS-複数の要素へのsetState