为什么jQuery似乎不等待动画完成？

Question

我要做的是：

1. 在进度栏中淡出。
2. 淡入淡出后，将进度键动画为100％。
3. 当进度栏处于100％时，淡出preogress bar。
4. 淡出淡出后，重置进度栏。

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

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

问题似乎是动画完整功能可以提早执行。这是因为浏览器无法使进度栏足够快地渲染，还是我在这里错过了什么？

这是一个JSFIDDLE，可以说明问题：http：//jsfiddle.net/dub6p/

Answer 1

似乎淡出了太早发生。尝试在淡出之前添加延迟。动画看起来不错，以至于IMO：http：//jsfiddle.net/dub6p/7/

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

Answer 2

放慢淡出的淡出功能，似乎可以正常工作。

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

示例：http：//jsfiddle.net/dub6p/5/

Answer 3

我认为使动画更快，淡出较慢会解决：

$('#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%'});
         });
     });
  });    
});

小提琴：http：//jsfiddle.net/dub6p/10/