Flexslider进度暂停问题

我有一个问题，使上悬停进度暂停与Flexslider鼠标移开时玩，如果我暂停Flexslider总有bitween Flexslider图像和进度的延迟，我怎样才能使进度和Flexslider图像同时加载。Flexslider进度暂停问题

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(); 
     }); 
});

来源

2013-02-15 user2014114

我认为这个问题是flexslider。如果您使用“播放”，则会重新启动动画的计时器，这就是进度条不同步的原因。我没有看到你如何解决这个问题，除了一些代码。就像您从一开始就检查时间一样，并将动画时间设置为您定义的时间与经过直到盘旋的时间之间的差异。但不要忘记重新开始新幻灯片的时间.. – gulty 2013-02-15 16:31:42

我会看看，谢谢。 – user2014114 2013-02-15 23:46:56

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

来源

2013-02-17 18:17:32 user2014114

Flexslider进度暂停问题

回答

相关问题