How to fade out a div 5 seconds after clicking on an element

HTML & CSS
1

If I wanted to hide .panel-left, .panel-right

with either a pure hide, where it just hides, or a .fadeOut(1500);

5 seconds after clicking on .jacketa, how would that be written into the code?

https://jsfiddle.net/g8p1z2m0/

(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);
}());
2

You can use setTimeout or setInterval to delay the hiding of your div. Below is the basic setup. In your_func put logic to hide your div. There are slight differences between these two.

//Your function will be called only once 5 seconds after invocation
setTimeout(function() { your_func(); }, 5000);

Or

//If you want your function to be called repeatedly every 5 seconds after invocation
setInterval( function(){your_func(); }, 5000);
1 Like
3

What I would like to do is fadeout and remove an element after a few seconds.

It would be initiated after an element is clicked.

Have it set so that after the play image is clicked, then a fade out transition would occur, then the element would be removed.

or, just have the elements removed after a certain period of time.

4

Below is the code you can use for what you’re attempting to do. elementId is the
Id of the element you will click. You just need to create the logic for fadeout and
remove element.

As you’ve probably figured out by now 5000 is 5 milliseconds or 5 seconds. This
means that your function will execute 5 seconds after the element is clicked.
Just google how to fadeout what ever it is you want to fadeout and google how
to remove an element using vanilla javascript and put the logic where you see
my comments.

var yourElement = document.getElementById(“elementId”);
yourElement.addEventListener(“click”, function(){
setTimeout(function(){
// fadeout logic goes here
// remove an element logic goes here
}, 5000);
});
2 Likes
5

The usual way to achieve a fadeout is to just to add a classname on the element, and let CSS handle it for you. Trying to do it all with JS results in a much worse experience. CSS is the right tool to achieve the fadeout.

cover.classList.add("fadeout");

That’s all the JS code you’ll need. The rest is up to CSS transition code.

I recommend that you contact the HTML & CSS forum about using the CSS transition technique to achieve the fadeout.

2 Likes
6

Why cover?
cover.classList.add("fadeout");

and not curtain?
curtain.classList.add("fadeout");

And what is the difference?

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    const thewrap = curtain.parentElement.querySelector(".container");
    sh
7

If curtain is what you want to hide, then make it curtain instead of cover.

Did you know that CSS has a transition delay?

.slide {
  /*...*/
  transition-delay: 5s;
}

This thread about fading out elements after a delay is one not suited for the JavaScript forum. It really is a CSS discussion this one.

I’ll move this discussion now over to the HTML + CSS forum.

1 Like
8

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

https://jsfiddle.net/c7or0vgp/

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

I am not sure how that would be added to this code in pure javascript.

https://jsfiddle.net/g8p1z2m0/

(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);
}());
9

You don’t use jQuery with your code. Using CSS for the delay and fadeout are much better and easier ways to achieve it.

Does anyone know if there’s some way to get this keyframe CSS to work on the code at https://jsfiddle.net/g8p1z2m0/ ?

.curtain.slide {
  /*...*/
  opacity: 0;
  animation: fadeOut 5s linear;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
10

I wanted to change this to vanilla javascript.

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

While it can work with JavaScript, it is the worst tool for the job. Doing it in JS is janky too.
Don’t hammer in a nail with a bloody screwdriver. That’s what you are attempting now to do.

CSS is for the presentation of the page. Fading things in and out is what CSS is great at.

1 Like
12

Can I see how it would be written, then decide between the two. I want to see how both work separately. Being able to see how both work visually would help.

13

There is no easy way to convert jquery animations to javascript. It’s a lot of bloody work with no real benefit coming from it. I will not be helping you to cut off your own leg either.

Use CSS to animate fade techniques is my best advice.

1 Like
14

I didn’t know it was something that was hard to do. It was a short code so it seemed like it was something simple. As I am not familiar with jquery, and don’t use it in codes. I guess short codes that may seem simple to the eye, some are more difficult than others.

And I have been looking at css ways to do it.

15

The code currently shows the element again after the fade so you can try it more than once :grinning:

16

Does that mean you don’t want to slide and break the curtains in half anymore?

Or do you want them to slide and then fade out at the same time? There’s no point in fading them out after they have left the building as you won’t see them.

You can fade and slide in that same key frame by just adding opacity into the key frame at appropriate points.

You can also handle multiple elements with css if the class is added to a common parent. You don’t need multiple classes added if the effects are all related.

You can slide the curtains and once that is finished you can do something to another element using a delay on its animation.

Unfortunately I am away until Friday and on mobile only so can’t offer code you until I return but I’m sure if you state your use case clear enough there are people here who can help :slight_smile:

17

That seems the best way to achieve things.

Currently the slide doesn’t seem to be using keyframes but is using the following instead:

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

I look forward to seeing how a keyframe solution can be implemented here instead.

18

Ok I couldn’t remember what was currently being used as jsfiddle doesn’t really work on a mobile. :slight_smile:

We can probably achieve the same thing with transitions as you can transition properties individually and they can have their own timing and delays.

Opacity could still be included in the transition but to make the element take up no space once everything is finished would require it being moved absolutely off screen after all the effects have finished. That can also be added into the transition but with a delay that causes it to only be moved immediately after x number of seconds (the duration of the fade effect).

It all depends if I am understanding the requirements properly ? :slight_smile:

1 Like
19

I came up with this.
https://jsfiddle.net/ay6zs7xm/

.fadeout {
  opacity: 1;
  transition: all 3s;
}
 
.fade {
  opacity: 0;
}

<div class="split-wrap fadeout">

This is used as a delay, unless if someone knows of a css way to do the same thing.

 setTimeout(function() {
      const fadeout = document.querySelector(".fadeout");
      fadeout.classList.add("fade");
    }, 3000);
20

I believe this was answered in your other thread and I showed you how to ass multiple transitions.