CODEWITHSUNDEEP
javascriptjquery
mrpinkman
mrpinkman

Reputation: 211

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

i i'm trying to do an animated progress bar, and i have this code so far:

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%");
        }); 
});

The problem is that text() only change when all animations have finished so, you can't see (1%), (2%), (3%), etc, you just see (3%) when the three animations finish.

Thanks in advance

Upvotes: 0

Views: 75

Answers (1)

Musa
Musa

Reputation: 97672

Actually it changes the text before the animation starts, if you want something to happen after an animation use the animation callback.

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

Upvotes: 3

Related Questions