javascript - How to run jquery function after the animation has completed? -
so i'm new javascript , jquery. need on how run 2nd function after 1st 1 has completed? first function progress bar , second 1 form want fade in after progressbar animation completed.
the script:
$(function() { var msecsperupdate = 1000 / 60; // # of milliseconds between updates, gives 60fps var progress = $('progress'); var duration = 1; // secs animate 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(); }); });
thanks in advance!
i'd add callback function animator
function make this:
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(); } }
then can call this:
$('a#forgot').click(function() { animator(function() { console.log('this runs after animation has completed'); }); });
note: simplified code-snippet without params or error handling, might wanna add.
Comments
Post a Comment