javascript - 如何注册进度条已完成并运行另一个功能？

Question

我有这个 Javascript 函数。当我单击一个按钮时，该按钮消失并显示一个进度条。如何注册时间已到并运行另一个功能？

$('#go').click(function() {
  console.log("moveProgressBar");

  $('.progress-wrap').removeClass('hidden');

  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  $('.progress-bar').stop().animate({
    left: progressTotal
    }, animationLength);
  $('#go').addClass('hidden');

});

http://codepen.io/TrueVineCS/pen/vuyxC

Answer 1

您可以使用 .animate 回调:

$('#go').click(function() {
  console.log("moveProgressBar");

  $('.progress-wrap').removeClass('hidden');

  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  $('.progress-bar').stop().animate({
       left: progressTotal
    }, 
    animationLength, 
    function(){
       // do on animation is complete
       $('#go').addClass('hidden');
  });

});

jQuery Documentation , your example