Flexslider ProgressBar pause issue

Question

I am having a problem making the ProgressBar pause on hover and play on mouseout with Flexslider, When i pause the Flexslider there is always a delay bitween Flexslider image and ProgressBar, How can i make the ProgressBar and Flexslider image load at the same time.

HERE IS THE CODE: http://jsfiddle.net/rhPWJ/39/

jQuery(window).load(function() {
 jQuery('.flexslider').flexslider({
 animation: "fade",
 controlNav: false,
 useCSS: false,
 controlNav: false,
 directionNav: false,
 pauseOnHover: true,
 smoothHeight: true,

 animationSpeed: 1800,

 after: function(slider) {
 jQuery('.slide-caption').show("slide", { direction: "down" }, 700);
 },

 before: function(slider) {
 jQuery('.slide-caption').hide("fade", 1800); 
 },

 });
 });

 jQuery(window).load(function() {
 function run() {
 jQuery('.progress_bar').animate({'width': "50%"}, 4000, run).width(0);
 }
 run();

  jQuery('.flexslider').hover(
         function() {
         jQuery('.flexslider').flexslider('pause');
         jQuery('.progress_bar').pause();
         });

         jQuery('.flexslider').mouseout(
         function() {
         jQuery('.flexslider').flexslider('play');
         jQuery('.progress_bar').resume();
         });
 });

Answer 1

I finally got this to work, CODE: http://jsfiddle.net/rhPWJ/92/

 jQuery(window).load(function() {
    jQuery('.flexslider').flexslider({

          animation: "fade",
          easing: "jswing",
          controlNav: false,
          useCSS: false,
          pauseOnAction: false,
          pauseOnHover: true,
          smoothHeight: true,
          controlNav: false,
          directionNav: false,
          slideshowSpeed: 5000,
          animationSpeed: 1800,

          // animate caption
          after: function(slider) { 
          jQuery('.slide-caption').show("slide", { direction: "down"}, 700);
          },

          before: function(slider) {  
          jQuery('.slide-caption').hide("fade", 1800);
          },

          // image loader
          start: function(slider) {
          slider.removeClass('loading');
          }
          });

          jQuery('.slide-caption').show("slide", { direction: "down"}, 700);

          function run() {
          jQuery('.progress_bar').animate({'width': "300px"}, 5000, run).width(0);
          }
          run();

         jQuery('.flexslider').hover(
         function() {
         jQuery('.progress_bar').pause();
         });

         jQuery('.flexslider').mouseout(
         function() {
         jQuery('.progress_bar').animate({'width': "300px"}, 5000, run).width(0);
         });
         });