(I am 9 weeks into a boot camp, so I apologize for the potentially rudimentary nature of this...)

I am appending an element to the DOM (a button) within a conditional:

$('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);

When this button is clicked, it runs through a series of functions to empty an array and clear some other content off the DOM. I would like to use the .fadeOut method of jQuery to remove THE BUTTON.

I have this in a subsequent function:

$('#clearHistoryButton').remove();

I would like to:

$('#clearHistoryButton').fadeOut(1000);

...so that it disappears in a fancy fashion.

It's not working - it simply waits one second and then - POOF - is gone.

This is my first question. This community has been ESSENTIAL in my growth in this realm and, as always, I appreciate all of you so very much.

CodePudding user response：

Did you try transition: opacity 1s in your CSS ?

Advantage:
Hardware accelerated (GPU), i.e. it doesn't bother your main processor (CPU) with this task, whereas jQuery's fadeOut() function is software based and does take CPU resources for that effect.

Steps:

1. Add transition: opacity 1s to your CSS rules of the desired button element
   here: ( #clearHistoryButton )
2. Add a CSS rule with button.fadeMeOut with opacity: 0
3. Add a simple jQuery function to add the class ".fadeMeOut" at click
4. Then remove button with setTimeout(function(){$('#clearHistoryButton').remove()},1000)

Run code snippet

$(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>