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>

Jquery滑块完成后再次自动滑动

1 个答案: