Skip to main content
se añadieron 63 caracteres en el cuerpo
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49
function create_db_container (i = 0) {
  if (i === dbs.length - 1) { return; }

  ...

  $(db)
    .appendTo('#databases'#databases')
    .fadeOut(0)
    .fadeIn(1500, () => {
      create_db_container(i + 1);
    });
}
var dbs = [
'<strong>Primer elemento</strong>',
'<h2>Segund elemento</h2>',
'<input'<label>Tercer type="textelemento</>'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>
function create_db_container (i = 0) {
  if (i === dbs.length - 1) { return; }

  ...

  $(db)
    .appendTo('#databases)
    .fadeOut(0)
    .fadeIn(1500, () => {
      create_db_container(i + 1);
    });
}
var dbs = [
'<strong>Primer elemento</strong>',
'<h2>Segund elemento</h2>',
'<input type="text/>'
];

create_db_container();

function create_db_container(i = 0) {
   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>
function create_db_container (i = 0) {
  if (i === dbs.length - 1) { return; }

  ...

  $(db)
    .appendTo('#databases')
    .fadeOut(0)
    .fadeIn(1500, () => {
      create_db_container(i + 1);
    });
}
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>
se añadieron 1870 caracteres en el cuerpo
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49
$(db).appendTo('#databases'#databases').fadeOut(0).fadeIn(1500);

Ejemplo

var dbs = [
'<strong>Primer elemento</strong>',
'<h2>Segund elemento</h2>',
'<input type="text/>'
];

create_db_container();

function create_db_container(i = 0) {
   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>

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

Ejemplo

var dbs = [
'<strong>Primer elemento</strong>',
'<h2>Segund elemento</h2>',
'<input type="text/>'
];

create_db_container();

function create_db_container(i = 0) {
   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>

Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Primero ocúltalo porque cuando lo agregas va a estar visible por defecto. Luego de ocultarlo muy rápido (0ms) lo muestras nuevamente con un tiempo más prolongado:

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

Además, de preferencia, no uses un loop para agregar contenido dinámico ya que la ejecución de un loop no esperará a que la llamada a una función termine, por el contrario continuará su ejecución, lo que puede llevar a efectos no deseados. En lugar de un for utiliza una función recursiva:

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

  ...

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

Para llamar otra vez a la función create_db_container primero espera a que termine la animación para obtener un efecto tipo "reveal", esto lo hace mediante un callback a fadeIn, el cual jQuery ejecutará una vez la animación haya sido completada.