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