完成后Jquery滑块再次自动

Question

我是 Jquery 的新手，我需要帮助。我在网页上有 Jquery 图像滑块，旋转几个不同的图像，每个图像有 3000 个计时器 - 它们仍然重复。在滑块下，我有简单的加载器栏 - 基于其他颜色隐藏 div，动画从左到右使用相同的计时器 3000。简单。但问题是，这个动画只运行一次并且图像不断旋转。所以问题是，我怎样才能让我的加载器栏在计时器到时带有“重新加载”动画？像这样-http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif

我的 JQUERY

function playslider(){
    var hidden = $('.colorSlide2');
    hidden.animate({"left":"0px"}, 3000).addClass('visible');   
}   
playslider();  

我的 CSS

.colorSlide2 {
    position:absolute;
    width:100%;
    z-index:2;
    left:-100%;
    height: 5px; 
    background: #f8e508;
}

.colorSlide1 {
    position: relative; 
    width: 100%; 
    height: 5px; 
    background: #254b8b;
} 

Answer 1

试试

$.fx.interval = -10;
function playslider(){
    var hidden = $(".colorSlide2")
    , reset = hidden.css("left");
    return hidden.animate({"left":"0%"}, 3000, "linear", function() {
     $(this).css("left", reset);
     return playslider()
    }).addClass("visible");   
}   
playslider();

$.fx.interval = -10;
function playslider(){
    var hidden = $(".colorSlide2")
    , reset = hidden.css("left");
    return hidden.animate({"left":"0%"}, 3000, "linear", function() {
     $(this).css("left", reset);
     return playslider()
    }).addClass("visible");   
}   
playslider();

.colorSlide2 {
    position:absolute;
    width:100%;
    z-index:2;
    left:-100%;
    height: 5px; 
    background: #f8e508;
}

.colorSlide1 {
    position: relative; 
    width: 100%; 
    height: 5px; 
    background: #254b8b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="colorSlide1">
    <div class="colorSlide2"></div>
</div>