进度条动画与滑块幻灯片

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/

进度条动画与滑块幻灯片

progress bar animate with slider slides

jquery

slider

progress-bar