進度條動畫與滑塊幻燈片

Question

嗨，夥計們，我需要你的幫助我創建一個見證滑塊，我需要一個滑塊進度條我創建了兩個東西，但問題是進度條只工作一次，但我想要新的幻燈片時，然後進展酒吧必須重新啓動。

這裏是我的代碼：

<div class="testimonial"> 
     <div class="test">1</div> 
     <div class="test">2</div> 
     <div class="test">3</div> 
     <div class="bar"> 
      <div class="progress"></div> 
     </div> 
    </div> 

CSS 
.testimonial { 
    margin: 10px 0; 
    width: 580px; /* Update to your slider width */ 
    height: 250px; /* Update to your slider height */ 
    position: relative; 
    overflow: hidden; 
} 
.testimonial .test { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.testimonial .bar{ 
position: relative; 
width: 100%; 
border-radius: 4px; 
height: 10px; 
background: #e1e1e1; 
top:120px; 

} 
.testimonial .bar .progress{ 
position: absolute; 
top: 0; 
left: 0; 
border-radius: 4px; 
height: 10px; 
width: 0; 
background: #000; 
} 
here is jquery 

$(document).ready(function(){ 
      // settings 
      var $slider = $('.testimonial'); // class or id of carousel slider 
      var $slide = 'div.test'; // could also use 'img' if you're not using a ul 
      var $transition_time = 1000; // 1 second 
      var $time_between_slides = 4000; // 4 seconds 

      function classAnimate(){ 
       $(".progress").animate({ 
        width: "100%" 
       }, 5500); 

      } 
      classAnimate(); 
      function slides(){ 
       return $slider.find($slide); 
      } 

      slides().fadeOut(); 

      // set active classes 
      slides().first() .addClass('active') ; 
      slides().first() .fadeIn($transition_time); 

      // auto scroll 
      $interval = setInterval(
        function() { 
         var $i = $slider.find($slide + '.active').index(); 

         slides().eq($i).removeClass('active'); 
         slides().eq($i).fadeOut($transition_time); 

         if (slides().length == $i + 1) $i = -1; 

         // loop to start 


         slides().eq($i + 1).fadeIn($transition_time); 
         slides().eq($i + 1).addClass('active'); 
         classAnimate((slides().length)); 

        } 
        , $transition_time + $time_between_slides 
      ); 




     }); 

Answer 1

你應該重置每次jQuery的動畫。

function classAnimate(){ 
      $(".progress") 
      .clearQueue() 
      .stop() 
      .css(
       {width:'0%'} 
      ) 
      .animate({ 
       width: "100%" 
      }, 5500); 

     } 

http://jsfiddle.net/yp8L2t9h/