CODEWITHSUNDEEP
javascriptjquery
Lucky500
Lucky500

Reputation: 507

Show dynamically created divs one by one

I am trying to show dynamically created li's one by one. Here is my code. Any idea why something like this would 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>

Upvotes: 1

Views: 36

Answers (2)

Yogen Darji
Yogen Darji

Reputation: 3300

If you want to fadeIn after created user display:none initially.

$('#submit').click(function(e) {
  e.preventDefault();
  var userInput = 5;
  var outputResult = [1, 2, 3, 4, 5];
  console.log(outputResult);
  var modifiedResult = outputResult.map(function(item) {
    return '<li style="display:none" class="ball">' + item + '</li>'
  });
  $('.output').html(modifiedResult.join(""));
  $('.ball').each(function(i, e) {
    debugger;
    $(this).delay(i * 400).fadeIn();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="output"></ul>

<input id="submit" type="button" value="submit" />

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

When you do $('.output').html(modifiedResult.join("")); the lis are already visible (display property is block by default).

It would suffice to add style="display:none" in the html strings you create with #map() function - see a 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>

Upvotes: 1

Related Questions