Question

我要做的是：

淡入进度条。
淡入淡出完成后，将进度条设置为100％。
当进度条为100％时，淡出预处理栏。
淡出完成后，重置进度条。

我认为这段代码会提供解决方案：

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

问题似乎是animate完成函数早期执行。这是因为浏览器没有足够快地呈现进度条，或者我在这里遗漏了什么？

这是一个说明问题的jsfiddle：http://jsfiddle.net/dub6P/

Answer 1

似乎fadeOut发生得太快了。尝试在fadeOut之前添加延迟。动画看起来很不错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/

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

3 个答案: