Jquery animate is not working within for loop

Question

I want the numbers inside the list to animate so it displays different number for that duration when button is on click state. But it seems jquery animation is not working inside of it for loop.

$("button").on("click",function(){

 for(var i=0; i < 2; i++ ){

  $({value: $(".number").eq(i).text()}).animate({value: data1[i]},{
       duration: 500,
       easing: 'swing',
       step: function(){
         $(".number").eq(i).text(parseInt(this.value));
       }
     });
  }

});

This is my code example.

score 0 · Accepted Answer · answered Jan 28 '16 at 18:29

0

As soon as the loop completes i is 3, ergo all usages of i in the animation callback will be the wrong value.

answered Jan 28 '16 at 18:29

Draco18s no longer trusts SE

15,628
3
36
56

So, How should I change for loop with using i? – nosugarsociety Jan 28 '16 at 18:36
http://stackoverflow.com/questions/1562127/jquery-callback-function-only-working-on-last-loop – Draco18s no longer trusts SE Jan 28 '16 at 18:38
Thanks so much, Draco18s. After few trial and errors, finally solved problem. – nosugarsociety Jan 28 '16 at 19:34

Jquery animate is not working within for loop

1 Answers1