2

我想做的是：

  1. 淡入进度条。
  2. 淡入淡出完成后，将进度条设置为 100%。
  3. 当进度条处于 100% 时，淡出进度条。
  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/

4

3 回答 3

5

似乎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%'});
             });
         });
     });    
 });

​</p>

于 2012-12-19T11:33:54.230 回答
3

减慢淡出功能，它似乎工作正常。

$('#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/

于 2012-12-19T11:30:50.227 回答
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%'});
         });
     });
  });    
});

小提琴：http: //jsfiddle.net/dub6P/10/

于 2012-12-19T11:54:42.880 回答