Delay progressbar until hidden page fadesIn

Delay progressbar until hidden page fadesIn

Hello everyone,

I have created a messy script for some hidden content that will fadeIn/fadeOut on click event and also, one of those pages (content actually) has a progressbar that animates the load to the percentage value i insert but the thing is that my animation plays in the background while the content is hidden. 

I am in need of a method (probably a trigger on click or a delay) for my code that will allow me to delay the progressbar load till after my content fades in.

Here is the code for the Hide/fadeIn/fadeOut content :

  1. $(function() {
  2.     $(".div1, .div2, .div3, .div0").hide();
  3.    $(".link1, .link2, .link3, .link0, .link4").bind("click", function () {

  4.       $(".div1, .div2, .div3, .div0").fadeOut();
  5.         
  6.       if ($(this).attr("class") == "link4")
  7.       {
  8.         $(".div1, .div2, .div3, .div0").fadeOut();
  9.       }
  10.  if ($(this).attr("class") == "link1")
  11.       {
  12.         $(".div1").delay(400).fadeIn();
  13.       }
  14.       else if ($(this).attr("class") == "link2")
  15.       { 
  16.         $(".div2").delay(400).fadeIn();
  17.       }
  18.         else if ($(this).attr("class") == "link3")
  19.       { 
  20.         $(".div3").delay(400).fadeIn();
  21.       }
  22.   else if ($(this).attr("class") == "link0")
  23.       { 
  24.         $(".div0").delay(400).fadeIn();

  25.       }
  26.     });
  27. $(".link1, .link2, .link3, .link0, .link4").bind("click", function () {
  28.   $('html, body').delay(400).animate({
  29.         scrollTop: $("#articles").offset().top
  30.     }, 500);
  31. });
  32. });
And here is the code for my progressbar :

  1. (function( $ ){
  2.   $.fn.animateProgress = function(progress, callback) {    
  3.     return this.each(function() {
  4.       $(this).animate({
  5.         width: progress+'%'
  6.       }, {
  7.         duration: 500, 
  8.         
  9.         // swing or linear
  10.         easing: 'linear',

  11.         // this gets called every step of the animation, and updates the label
  12.         step: function( progress ){
  13.           var labelEl = $('.ui-label', this),
  14.               valueEl = $('.value', labelEl);
  15.           
  16.           if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
  17.             labelEl.hide();
  18.           }else{
  19.             if (labelEl.is(":hidden")) {
  20.               labelEl.fadeIn();
  21.             };
  22.           }
  23.           
  24.           if (Math.ceil(progress) == 100) {
  25.             labelEl.text('Done');
  26.             setTimeout(function() {
  27.               labelEl.fadeOut();
  28.             }, 1000);
  29.           }else{
  30.             valueEl.text(Math.ceil(progress) + '%');
  31.           }
  32.         },
  33.         complete: function(scope, i, elem) {
  34.           if (callback) {
  35.             callback.call(this, i, elem );
  36.           };
  37.         }
  38.       });
  39.     });
  40.   };
  41. })( jQuery );
  42. $(document).ready(function() {
  43.   // Hide the label at start
  44.   $('#progress_bar1 .ui-progress .ui-label, #progress_bar2 .ui-progress .ui-label, #progress_bar3 .ui-progress .ui-label').hide();
  45.   // Set initial value
  46.   $('#progress_bar1 .ui-progress, #progress_bar2 .ui-progress, #progress_bar3 .ui-progress').css('width', '10%');

  47.   // Simulate some progress
  48.   $('#progress_bar1 .ui-progress').delay(500).animateProgress(18, function() {
  49.       });
  50.   $('#progress_bar2 .ui-progress').delay(700).animateProgress(39, function() {
  51.       });
  52.     
  53.    $('#progress_bar3 .ui-progress').delay(900).animateProgress(43, function() {
  54.   });
  55.     
  56.     });
  57.  
Thank you in advance :)