为什么'；jQuery似乎在等待动画完成？

我想做的是：

淡入进度条

淡入淡出完成后，将进度条设置为100%

当进度条为100%时，淡出预进度条

淡出完成后，重置进度条

我认为该代码将提供解决方案：

    $('#savebar').fadeIn('fast', function () {
        $('#savebar .bar').animate({width: '100%'}, "slow", function () {
            $('#savebar').fadeOut('fast', function () { 
                $('#savebar .bar').css({'width':'0%'});
            });
        });
    });

问题似乎是animate complete函数执行得很早。这是因为浏览器渲染进度条的速度不够快，还是我在这里遗漏了什么

---

这里有一个JSFIDLE说明了这个问题：

减慢淡出函数的速度，它似乎可以正常工作

$('#btn').click(function () {
    $('#savebar').fadeIn('fast', function () {
        $('#savebar .bar').animate({width: '100%'}, "slow", function () {
            $('#savebar').fadeOut(1500, function () {
                $('#savebar .bar').css({'width':'0%'});
            });
        });
    });    
});

---

示例：

似乎淡出发生得太快了。尝试在淡出之前添加延迟。这样，动画看起来相当不错：

---

​

我认为加快动画制作速度和减慢淡出速度可以解决以下问题：

$('#btn').click(function () {
  $('#savebar').fadeIn('fast', function () {
     $('#savebar .bar').animate({width: '100%'}, 500, function () {// 500 ms used
         $('#savebar').fadeOut(1500, function () {                // 1500 ms used
             $('#savebar .bar').css({'width':'0%'});
         });
     });
  });    
});

---

fiddle:

我同意这样做很好，但这不是在动画完成后执行完整功能的想法吗？这是因为animate不等待浏览器渲染每个步骤吗？评论就在金钱上。虽然这个答案在这个例子中“工作”得很好，但它没有解决核心问题，即

complete

回调没有等待动画完成。你对我对tommy答案的评论有何解释？

$('#btn').click(function () {
  $('#savebar').fadeIn('fast', function () {
     $('#savebar .bar').animate({width: '100%'}, 500, function () {// 500 ms used
         $('#savebar').fadeOut(1500, function () {                // 1500 ms used
             $('#savebar .bar').css({'width':'0%'});
         });
     });
  });    
});