进度条延迟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

我调整了你的代码并最终到达了这里：

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，我做了以下更改：在{{1}之后调用run }} 打回来。你仍然看不到淡入淡出效果，因为时间栏的百分比是fadeout。

0%

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();