Jquery slider auto 完成后再次自动

Question

我是 Jquery 的新人，我需要帮助解决这个问题。我在网页上有 Jquery 个图像滑块，每个图像都有 3000 个计时器轮换几个不同的图像 - 它们仍然重复。在滑块下，我有简单的加载器栏 - 基于其他颜色隐藏 div，动画从左到右使用相同的计时器 3000。简单。但问题是，这个动画运行只有一次并且图像不断旋转。所以问题是，如何在计时器启动后用 "reload" 动画制作我的加载器栏？像这样 - 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>

Jquery slider auto 完成后再次自动

Jquery slider auto again after finish

javascript

jquery

animation

slider