javascript - Show dynamically created divs one by one -
i trying show dynamically created li's 1 one. here code. idea why not work?
$('form').submit(function(e) { e.preventdefault(); var userinput = $('#inputnumber').val(); console.log(outputresult); var modifiedresult = outputresult.map(function(item) { return '<li class="ball">' + item + '</li>' }); $('.output').html(modifiedresult.join("")); $('.ball').each(function(i, e) { $(this).delay(i * 400).fadein(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="output"></ul>
when $('.output').html(modifiedresult.join("")); lis visible (display property block default).
it suffice add style="display:none" in html strings create #map() function - see demo below:
var userinput = $('#inputnumber').val(); var outputresult = [1,2,3,4,5]; var modifiedresult = outputresult.map(function(item) { return '<li style="display:none" class="ball">' + item + '</li>' }); $('.output').html(modifiedresult.join("")); $('.ball').each(function(i, e) { $(this).delay(i * 400).fadein(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="output"></ul>
Comments
Post a Comment