进度条延迟jQuery

Question

我有一个带有进度条的简单滑块，工作正常，但在下一个滑块转换期间，进度立即开始，没有考虑转换时间。我正在尝试添加fadeOut和fadeIn效果，但效果不佳。

你能看看这个fiddle？

的JavaScript

bar = $('.progress_bar'); 
time = 3000; 

function run() { 
    bar.width(0); 
    bar.animate({ 
    'width': "100%" 
    }, time, run).fadeOut(500).fadeIn(500); 
} 

$("#slideshow > li:gt(0)").hide(); 
//bar.stop(true, true).css("width", 0).animate({'width': "100%"}, time, run); 

setInterval(function() { 
    $('#slideshow > li:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, time); 

run(); 

Answer 1

我tweek你的代码，终于到达这里：

bar = $('.progress_bar'); 
time = 3000; 

function run(){ 
    bar.width(0); 
    bar.animate({'width': "100%"}, time,function(){ 
    change();run(); 
    }).fadeOut(500).fadeIn(500); 
} 
$("#slideshow > li:gt(0)").hide(); 


var change = function() { 
    $('#slideshow > li:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}; 

run(); 

DEMO //更新添加的正确的路径图像

描述：而不是独立运行两个功能我连接然后当进度条完成我正在改变幻灯片change函数。所以我已经删除了setInterval并每次完成进度条时都会调用它。

---

更新：你不能看到淡出/因为在动画完成后，即刻就被再次调用run，我做了以下变化：后fadeout回调调用run。您仍看不到淡入效果，因为该时间栏的百分比是0%。进度条滑动

function run(){ 
    bar.width(0); 
    bar.fadeIn(500,function(){ 
    bar.animate({'width': "100%"}, time).fadeOut(500,function(){ 
     change();run(); 
    }); 
    }); 
} 

Updated DEMO

Answer 2

在这里你去：DEMO

bar = $('.progress_bar'); 
time = 3000; 

function run(){ 
    bar.width(0); 
    bar.animate({'width': "100%"}, time, run) 
    .fadeOut(500).fadeIn(500,function(){ 
    setTimeout(function() { 
     animation(); 
    }, time); 
    }); 
} 
function animation(){ 
    $("#slideshow > li:gt(0)").hide(); 
    setTimeout(function() { 
    $('#slideshow > li:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
    }, time); 
} 
animation(); 
run();