Tengo un #scenario identificación dividida que tiene varios elementos <p> como elementos secundarios. Quiero tener una función que los desvanezca uno por uno en orden inverso y luego los elimine del DOM. Estoy usando jQuery.
Mi código:
function fadeAndDelete() { var elements = $("#scenario").children().get().reverse(); $.each( elements, function(index, element) { element.animate( {'color': 'rgba(0, 0, 0, 0)'}, 1000, function() { $(this).remove(); } ); } ) }; También traté de usar element.remove() y $(element).remove() , y ninguno de ellos funcionó.
Puntos de bonificación: en un mundo ideal, habría un intervalo de tiempo entre las eliminaciones del elemento (como si se usara una función sleep() entre los ciclos each()).
El animate() que estás usando es el DOM animado, no el de jquery:
https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
animate(keyframes, options)
No hay un parámetro de devolución de llamada para esta función, por lo que no es que .remove() no funcione, es que nunca se llama a la función.
Para usar la animate de jquery, necesita un objeto jquery:
$.each(elements, function(index, element) { $(element).animate(... Sin embargo, tenga en cuenta que jquery es conocido por no poder animar colores sin un complemento adicional o usando css, por lo que su código no se animará, pero se llamará a .remove() .
Para el escenario de uno a la vez, puede usar setTimeout . Hay muchas respuestas existentes en SO para esto, pero aquí está su código:
function fadeAndDelete() { var elements = $("#scenario").children().get().reverse(); $.each(elements, function(index, element) { setTimeout(function() { $(element).fadeOut(2000, function() { this.remove(); }); }, index*500); }); }; fadeAndDelete(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=scenario> <div>a</div> <div>b</div> <div>c</div> </div>