Home / Questions / 62451
Accepted
lromeraj
Asked: 2020-04-13 03:10:17 +0800 CST 2020-04-13 03:10:17 +0800 CST

How to animate elements that are created dynamically in a (for loop)

  • 772

I have a function that is in charge of creating elements dynamically , what I have is the following:

function create_db_container(i) {

   var db = document.createElement("div");
   var db_icon = document.createElement("i");
   var db_label = document.createElement("label");

   var options = document.createElement("div");
   var delete_db = document.createElement("button");
   var edit_db = document.createElement("button");

   $(db_icon).html('dns');
   $(db_icon).addClass('material-icons db_icon');
   $(db_icon).appendTo(db);

   //Label - name of the database
   $(db_label).html(dbs[i]);
   $(db_label).addClass('db_label');
   $(db_label).appendTo(db);

   //Buttons inside options div
   //Drop button
   $(delete_db).attr('name',dbs[i]);
   $(delete_db).addClass('material-icons db_button_label kill');
   $(delete_db).html('close');
   $(delete_db).appendTo(options);

   //Edit button
   $(edit_db).attr('name',dbs[i]);
   $(edit_db).addClass('material-icons db_button_label edit');
   $(edit_db).html('mode_edit');
   $(edit_db).appendTo(options);

   $(options).addClass("options");
   $(options).appendTo(db);

   $(db).attr('id',dbs[i]);
   $(db).addClass('database_container');
   $(db).appendTo("#databases");
   /*
   Aquí he probado a usar
   $(db).appendTo("#databases").fadeIn(500);
   */
}

for (var i=0; i < dbs.length; i++) {
  if (dbs.length == 1 && dbs[0] == "") {break;}
  create_db_container(i);
}

As you can see in the comment inside the script, what I intend is that every time the element is added dbto #databasesdo an effect like fadeIn.

I would appreciate any possible help

javascript

2 Answers

  1. Best Answer

    First hide it because when you add it it will be visible by default. After hiding it very fast (0ms) you show it again with a longer time:

    $(db).appendTo('#databases').fadeOut(0).fadeIn(1500);

    Also, preferably don't use a loop to add dynamic content as the execution of a loop will not wait for a function call to finish, instead it will continue its execution, which can lead to undesirable effects. Instead of a for use a recursive function:

    function create_db_container (i = 0) {
  if (i === dbs.length - 1) { return; }

  ...

  $(db)
    .appendTo('#databases')
    .fadeOut(0)
    .fadeIn(1500, () => {
      create_db_container(i + 1);
    });
}

    Example

    var dbs = [
'<strong>Primer elemento</strong>',
'<h2>Segund elemento</h2>',
'<label>Tercer elemento</label>'
];

create_db_container();

function create_db_container(i = 0) {
   if (i === dbs.length) { return; }
   
   var db = document.createElement("div");
   var db_icon = document.createElement("i");
   var db_label = document.createElement("label");

   var options = document.createElement("div");
   var delete_db = document.createElement("button");
   var edit_db = document.createElement("button");

   $(db_icon).html('dns');
   $(db_icon).addClass('material-icons db_icon');
   $(db_icon).appendTo(db);

   //Label - name of the database
   $(db_label).html(dbs[i]);
   $(db_label).addClass('db_label');
   $(db_label).appendTo(db);

   //Buttons inside options div
   //Drop button
   $(delete_db).attr('name',dbs[i]);
   $(delete_db).addClass('material-icons db_button_label kill');
   $(delete_db).html('close');
   $(delete_db).appendTo(options);

   //Edit button
   $(edit_db).attr('name',dbs[i]);
   $(edit_db).addClass('material-icons db_button_label edit');
   $(edit_db).html('mode_edit');
   $(edit_db).appendTo(options);

   $(options).addClass("options");
   $(options).appendTo(db);

   $(db).attr('id',dbs[i]);
   $(db).addClass('database_container');

   $(db)
     .appendTo("#databases")
     .fadeOut(0)
     .fadeIn(500, () => {
       create_db_container(i + 1);
     });
   
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="databases"><dib>

    To call the function again, it create_db_containerfirst waits for the animation to finish to get a "reveal" type effect, this is done through a callback to fadeIn, which jQuery will execute once the animation has completed.

    • 4

  2. It's not really a JavaScript issue but a style issue. When you create the ones div with class "database_container", by default they are visible, so doing fadeInnothing happens (they are already visible, there is really nothing to do).

    For it to work fadeInyou must make it div.database_containerhidden by default (using display:noneCSS) and you will see the effect:

    function create_db_container(i) {

   var db = document.createElement("div");
   var db_icon = document.createElement("i");
   var db_label = document.createElement("label");

   var options = document.createElement("div");
   var delete_db = document.createElement("button");
   var edit_db = document.createElement("button");

   $(db_icon).html('dns');
   $(db_icon).addClass('material-icons db_icon');
   $(db_icon).appendTo(db);

   //Label - name of the database
   $(db_label).html(dbs[i]);
   $(db_label).addClass('db_label');
   $(db_label).appendTo(db);

   //Buttons inside options div
   //Drop button
   $(delete_db).attr('name',dbs[i]);
   $(delete_db).addClass('material-icons db_button_label kill');
   $(delete_db).html('close');
   $(delete_db).appendTo(options);

   //Edit button
   $(edit_db).attr('name',dbs[i]);
   $(edit_db).addClass('material-icons db_button_label edit');
   $(edit_db).html('mode_edit');
   $(edit_db).appendTo(options);

   $(options).addClass("options");
   $(options).appendTo(db);

   $(db).attr('id',dbs[i]);
   $(db).addClass('database_container');
   //$(db).appendTo("#databases");
   

   $(db).appendTo("#databases").fadeIn(500);
   
}

var dbs = ["db1", "db2", "db3"];

for (var i=0; i < dbs.length; i++) {
  if (dbs.length == 1 && dbs[0] == "") {break;}
  create_db_container(i);
}
    .database_container { display:none; }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="databases"></div>

    • 2