1

ホバー時に ProgressBar を一時停止し、Flexslider でマウスアウト時に再生する際に問題が発生しています。Flexslider を一時停止すると、Flexslider イメージと ProgressBar の間で常に遅延が発生します。

コードは次のとおりです。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();
         });
 });
4

1 に答える 1

0

私はついにこれを機能させました。コード: 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-17T18:17:32.610 に答える