javascript - 在 animate() 之后使用时，jQuery text() 无法正常工作

Question

我正在尝试做一个动画进度条，到目前为止我有这个代码:

HTML

<div class="bar-container">
    <div class="bar"><div class="bar-value"></div></div><button>Submit</button><img src="gif.gif" class="loader">
    <br><br>
    <span class="progress"></span>
</div>

JQUERY

   $(document).ready(function(){
        $('button').click(function(){
            $('.loader').fadeIn(1200);

            $('.bar-value').animate({width: '+=1%'},100);
            $('.progress').text("1%");
            $('.bar-value').animate({width: '+=1%'},100);
            $('.progress').text("2%");
            $('.bar-value').animate({width: '+=1%'},100);
            $('.progress').text("3%");
        }); 
});

问题是 text() 仅在所有动画完成时才会更改，因此您看不到 (1%)、(2%)、(3%) 等，当三个动画完成。

提前致谢

Answer 1

实际上，它会在动画开始之前更改文本，如果您希望在动画之后发生某些事情，请使用动画回调。

$(document).ready(function(){
        $('button').click(function(){
            $('.loader').fadeIn(1200);

            $('.bar-value').animate({width: '+=1%'},100, function(){ 
                $('.progress').text("1%");
            });
            $('.bar-value').animate({width: '+=1%'},100, function(){ 
                $('.progress').text("2%");
            });
            $('.bar-value').animate({width: '+=1%'},100, function(){ 
                $('.progress').text("3%");
            });
        }); 
});

http://jsfiddle.net/sVDb7/