(Llevo 9 semanas en un campo de entrenamiento, así que me disculpo por la naturaleza potencialmente rudimentaria de esto...)
Estoy agregando un elemento al DOM (un botón) dentro de un condicional:
$('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);Cuando se hace clic en este botón, ejecuta una serie de funciones para vaciar una matriz y borrar algún otro contenido del DOM. Me gustaría usar el método .fadeOut de jQuery para eliminar EL BOTÓN.
Tengo esto en una función posterior:
$('#clearHistoryButton').remove();Me gustaría:
$('#clearHistoryButton').fadeOut(1000);...para que desaparezca de forma elegante.
No funciona, simplemente espera un segundo y luego, ¡POOF!, desaparece.
Esta es mi primera pregunta. Esta comunidad ha sido ESENCIAL en mi crecimiento en este ámbito y, como siempre, los aprecio mucho a todos.
¿Intentaste transition: opacity 1s en tu CSS ?
Ventaja:
Acelerado por hardware (GPU) , es decir, no molesta a su procesador principal (CPU) con esta tarea, mientras que la función fadeOut() de jQuery está basada en software y requiere recursos de CPU para ese efecto.
Pasos:
transition: opacity 1s a sus reglas CSS del elemento de botón deseado#clearHistoryButton )button.fadeMeOut con opacity: 0setTimeout(function(){$('#clearHistoryButton').remove()},1000)Ejecutar fragmento de código
$(function() { // Shorthand for $( document ).ready() $("#clearHistoryButton").on( "click", function() { // first: fade out the button with CSS $(this).addClass("fadeMeOut"); // then: after fadeOut effect is complete, remove button from your DOM setTimeout(function(){ $('#clearHistoryButton').remove(); },1000); }); }); button { opacity: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; } button.fadeMeOut { opacity: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="clearHistoryButton">Press to hide me</button>