1

Tengo una función que se encarga de crear elementos dinámicamente, lo que tengo es lo siguiente:

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);
}

Como bien se puede ver en el comentario dentro del guión lo que pretendo es que cada vez que se agrega el elemento db a #databases haga un efecto como el fadeIn.

Agradecería cualquier ayuda posible

2 respuestas 2

4

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);
    });
}

Ejemplo

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>

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.

4
  • Gracias Gustavo por tu aclaración en cuanto al loop for :)
    – lromeraj
    Commented el 12 abr. 2017 a las 12:46
  • Para serte sincero, mi solución me parece más práctica. Pero es cuestión de gustos. Como siempre, un gusto poder ayudar. Saludos.
    – gugadev
    Commented el 12 abr. 2017 a las 12:50
  • Gustavo se que tu respuesta es práctica y ha sido buena, pero bien sabemos todos que no podemos aceptar dos preguntas, por cortesía tomo tu respuesta como aceptada, pero que conste que las dos son válidas.
    – lromeraj
    Commented el 12 abr. 2017 a las 12:54
  • @Javi No debiste cambiarla. Acepta la de Álvaro por favor. Lo mío es un comentario. La respuesta aceptada siempre es a criterio del OP, por lo tanto, tú decides, bajo tu criterio, cuál es la más acertada respecto a tu problema.
    – gugadev
    Commented el 12 abr. 2017 a las 13:04
2

Realmente no es un problema de JavaScript sino de estilos. Cuando creas los div con clase "database_container", por defecto estos son visibles, por lo que al hacer el fadeIn no ocurre nada (ya están visibles, no hay nada que hacer realmente).

Para que funcione el fadeIn debes hacer que los div.database_container estén escondidos por defecto (usando display:none en CSS) y ya verás el efecto:

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>

1
  • Gracias Álvaro, no se como no he podido caer en ello :/
    – lromeraj
    Commented el 12 abr. 2017 a las 12:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.