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％）等，你只看到（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/

在animate（）之后使用时，jQuery text（）无法正常工作

1 个答案: