Flexslider ProgressBar 暂停问题答案

【问题标题】：Flexslider ProgressBar pause issueFlexslider ProgressBar 暂停问题
【发布时间】：2013-09-14 17:47:37
【问题描述】：

我在使用 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();
         });
 });

【问题讨论】：

我认为问题出在 flexslider。如果您使用“播放”，它会重新启动动画计时器，这就是进度条不同步的原因。除了一些代码外，我不知道如何解决这个问题。就像您从一开始就检查时间并将动画时间设置为您定义的时间与直到悬停所经过的时间之间的差。但是不要忘记重置新幻灯片开始的时间..
我去看看，谢谢。

标签： jquery flexslider

【解决方案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);
         });
         });

【讨论】：