Need help changing from jquery to vanilla javascript

Question

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?

  $('.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);
}());

score 0 · Answer 1 · answered Jul 21 '21 at 02:51

0

you can create custom delay function like

const delay = (ms) => new Promise(resolve => setTimeout(resolve,ms));

and you can call it as await delay(1000)//waits 1sec but the function you call it inside needs to be async function or use .then() as delay(1000).then( () => console.log("do something"));

check the following link for fadeout:

How to make fadeOut effect with pure JavaScript

answered Jul 21 '21 at 02:51

Emre Karakuz

91
1
5

This code can't be changed to vanilla javascript the way it is? $('.curtain').click(function() { $('.fadeout').delay(500).fadeOut(3000, function() { $(this).remove(); }); }); It can't be done? – Jul 21 '21 at 02:55
why not? isn't jquery also javascript? – Emre Karakuz Jul 21 '21 at 02:59
How would I convert it to vanilla javascript to add to my code? That is what I am looking for help doing. – Jul 21 '21 at 03:01
This _is_ vanilla JS. – Andy Jul 21 '21 at 03:03
This is jquery: $('.curtain').click(function() { $('.fadeout').delay(500).fadeOut(3000, function() { $(this).remove(); }); }); / I need help changing it to pure javascript. Would you be able to help me with that? – Jul 21 '21 at 03:06
Is this something that is very difficult to do and can't be done? – Jul 21 '21 at 03:24
I was told it is too difficult to do. – Jul 21 '21 at 03:52

Kinglish · Accepted Answer · 2021-07-21T04:03:06.290

0

You can achieve this via setTimeout, querySelector and css transition

document.querySelector('.curtain').addEventListener('click', function(e) {
  let f = document.querySelector('.fadeout')
  setTimeout(function() {
    f.classList.add('fade')
  }, 500);
  setTimeout(function() {
    f.parentNode.removeChild(f)
  }, 3500);
});

.fadeout {
  opacity: 1;
  transition: all 3s;
  background-color: #f00;
  color: #fff;
  padding: 20px;
}

.fade {
  opacity: 0
}

<div class='fadeout'>Test fade</div>
<button class='curtain'>click me</button>

edited Jul 21 '21 at 04:03

answered Jul 21 '21 at 03:59

Kinglish

23,358
3
22
43

Thank you. How would it be written without the arrow function? – Jul 21 '21 at 04:00
answer updaated – Kinglish Jul 21 '21 at 04:03
Can this jquery code be converted straight to vanilla javascript the way it is, or it can't be, and is too difficult to do? $('.curtain').click(function() { $('.fadeout').delay(500).fadeOut(3000, function() { $(this).remove(); }); }); – Jul 21 '21 at 04:05
I don't understand. I translated it directly. Of course it looks different bc jQuery is a set of methods built on top of javascript. No, you can't directly replace all jQuery methods or structures without writing complex functions to replace the jQuery you're not using. You wanted vanilla JS - This is the answer to your question. – Kinglish Jul 21 '21 at 04:09
Can you add a .delay(500) to the javascript? How would that be added in? And thank you very much. – Jul 21 '21 at 04:10
delay() is a jQuery method. It utilizes setTimeout and some kind of promise. – Kinglish Jul 21 '21 at 04:12
I guess I thought your goal was to replicate the effect, not the actual syntax. There is definitely a way to replicate the actual jquery code in your question, but then you're effectively creating a jquery-esque class, which is a large undertaking. AND, as I learned the other day, `delay()` is fickle and I coulsn't get it to work with a certain sequence, so I had to use setTimeout instead. jQuery is great, but sometimes nothing does the trick like vanilla – Kinglish Jul 21 '21 at 04:17
How would a transition delay be added to the css, and can it be done? – Jul 21 '21 at 05:04
How do I fix this? --- Uncaught TypeError: Cannot read property 'removeChild' of null" https://jsfiddle.net/jastobhr/ – Jul 21 '21 at 05:16
After the play image is clicked I receive that error message. – Jul 21 '21 at 05:19
I see that. I tested it 10x and it happened once. Something odd is happening, but I can't figure it out now. I will look at it tomorrow. – Kinglish Jul 21 '21 at 05:23
Were you able to fix it? – Jul 22 '21 at 13:06

Need help changing from jquery to vanilla javascript

2 Answers2

Linked