Question

我在使用Flexslider时使ProgressBar暂停并使用Flexslider在mouseout上播放时遇到问题，当我暂停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

我终于得到了这个，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);
         });
         });

Flexslider ProgressBar暂停问题

1 个答案: