i am facing issue with for loop in jQuery

Question

link

i am facing problem with for loop in jQuery

i want to show value one by one

1 then 2 then 3 upto 50

but it showing 1 to 50 at the same time

html

<div><span></span></div>

js

var i=0;


for(i=0;i<=50;i++)
{
    $("div").hide().append("<span>" + i + "</span>" + "\n").fadeIn(500);

}

Answer 1

You can do like this

for (i = 0; i <= 50; i++) {
    $("div").append($("<span/>", {
        text: i
    }).hide().delay(i * 400).fadeIn(300));

}

Fiddle

Answer 2

Try this : instead of loop, you can use setInterval where append the count value and increment the count.

var i = 0;
var limit = 50;

var interval = setInterval(function () {
    $("div").append("<span>" + i + "</span>" + "\n").fadeIn(500);

    if (i == limit) clearInterval(interval); //stop interval
    i++;
}, 2000);

Demo