jQuery text()在animate()之后不能正常工作

jQuery text() not working correctly when used after animate()

本文关键字：常工作 不能 工作 animate text jQuery 之后      更新时间：2023-09-26

如果我想做一个动画进度条，到目前为止我有这个代码:

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%)等，你只能看到(3%)当三个动画完成时。

Thanks in advance

实际上它会在动画开始前改变文本，如果你想在动画结束后发生一些事情，请使用动画回调。

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

相关文章：