Trying to figure out how to get fade to work – JavaScript – SitePoint Forums

https://jsfiddle.net/xLkngsyd/

Additionally, in jsitor, after I click on on the 2nd video, the primary participant’s picture fades out.
https://jsitor.com/kDARJVjvu

I used to be attempting to fade out the picture, however I’m not positive I’m able to.

The define, after I click on on the primary video, it fades in how it’s purported to.

After the play button is clicked.

After I click on on the opposite movies it doesn’t work.

.curtain::after 
  content material: "";
  place: absolute;
  left: 0;
  proper: 0;
  backside: 0;
  prime: 0;
  define: 1px strong #333;
  pointer-events: none;


.curtain.slide::after 
  define: 1px strong #0059dd;
  transition: define 2s ease-in;

This can be a js query now and never css.

The picture fades out in jsfiddle additionally as a result of while you click on the picture a category of slide is added to the primary curtain within the html quite than the curtain of the present factor…

The youtube embed code removes the picture fully while you click on play and replaces it with the iframe so that you gained’t be capable of fade the picture out except you add a delay earlier than the iframe will get swapped. That’s past my scope and a query for the js discussion board.

I used to be simply advised this.

operate openCurtain(cowl) 
    /* disguise(cowl);*/
    const curtain = doc.querySelector(".curtain");
    curtain.classList.add("slide");
  

When this operate runs, it’s simply going to focus on the primary curtain. querySelector will solely get the primary factor the selector matches.

The best way to goal the dad or mum nodes of a component. The curtain is 2 dad and mom above every div with class=“embed-youtube”.

That’s principally what I simply advised you.

You want the js to pick out the curtain factor which is an ancestor of the presently clicked merchandise.

You’ve gotten achieved related earlier than.