Rewriting this Jquery function as plain Javascript

Question

I'm having some problems rewriting this slideshow function in Javascript. Because of some project constraints, I have to revert back to plain JS.

$(".fadein img:gt(0)").hide();
  setInterval(function() {
    $(".fadein :eq(0)").fadeOut(2000)
      .next().fadeIn(1000)
      .end().appendTo('.fadein');
  }, 240000)

SO is not a free code translation service. What have you tried so far to solve this on your own? -> [What topics can I ask about here?](https://stackoverflow.com/help/on-topic), [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — Andreas, Oct 23 '21 at 10:22

score 1 · Answer 1 · answered Oct 23 '21 at 10:27

Here's a good start for you.

Take a look at: How to do fade-in and fade-out with JavaScript and CSS

And please provide a minimal reproducible example

let fadeInImgElements = document.querySelectorAll('.fadein>img:not(:first-child)');
let fadeInElement = document.querySelector('.fadein:first-child');
const fadeOut = function(element, interval) {
  var op = 1; // initial opacity
  var timer = setInterval(function() {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op -= op * 0.1;
  }, interval);
}
const fadeIn = function(element, interval) {
  var op = 0.1; // initial opacity
  element.style.display = 'block';
  var timer = setInterval(function() {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, interval);
}
fadeInImgElements.forEach(function(img) {
  img.style.display = "none";
})
setInterval(function() {
  fadeOut(fadeInElement, 50);
  fadeIn(fadeInElement.nextElementSibling, 50);
  document.querySelector('.fadein').appendChild(fadeInElement.nextElementSibling);
}, 1000)

<div class="fadein">
  <img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg">
  <img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg">
</div>

Rewriting this Jquery function as plain Javascript

1 Answers1