Delay, fadeout, remove

[javascriptcoding5678]

I found this javascript code that does what I am looking for.

The only issue is, it is in jquery.

I’m trying to change it to vanilla javascript.

Is there someone who can help me with this?

I was told this is very difficult to do.

https://jsfiddle.net/c7or0vgp/

$('.curtain').click(function() {
          $('.fadeout').delay(500).fadeOut(3000, function() {
              $(this).remove();
          });
      });

Which would then be added to this code.

https://jsfiddle.net/07gstwmx/

(function iife() {
      "use strict";
    
      function show(el) {
        el.classList.remove("hide");   
      }
    
      function hide(el) {
        el.classList.add("hide");
      }
    
      function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const curtain = document.querySelector(".curtain");
        curtain.classList.add("slide");
        const thewrap = curtain.parentElement.querySelector(".container");
        show(thewrap);
      }
    
      const cover = document.querySelector(".jacketa");
      cover.addEventListener("click", coverClickHandler);
    }());

[snowmonkey]

So what exactly is it, in steps, that you’re trying to accomplish? In terms of both visual and structural changes? In the jQuery version, the button is clicked and a half second later the button begins to fade, taking three seconds to do so, at which point the faded button is removed from the DOM.

Are you looking to do something similar? If so, there are some useful things to research. First, setTimeOut will let you schedule something to happen at some future point. Second, take a look at CSS transitions, this could handle the fade cleanly. And lastly, there is a DOM event to listen to CSS transitions. In this case transitionend.

References:

• DevDocs setTimeout
• DevDocs CSS transitions
• DevDocs transitionend event