jquery - Flexslider ProgressBar 暂停问题

Question

我在使用 Flexslider 使 ProgressBar 在悬停时暂停并在鼠标悬停时播放时遇到问题，当我暂停 Flexslider 时，Flexslider 图像和 ProgressBar 之间总是会有延迟，我怎样才能使 ProgressBar 和 Flexslider 图像同时加载。

这是代码：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

我终于让它工作了，代码：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);
         });
         });