Converting simple text fade loop from jQuery to Javascript

Question

I have three divs with text inside them which I want to fade in and out on a loop. I had it working in jQuery but decided its best to be in pure Javascript:

<div class="container">
  <h2 class="quotes">first quote</h2>
  <h2 class="quotes">second quote</h2>
  <h2 class="quotes">3rd quote</h2>
</div>

I am trying to convert this jquery into pure vanilla Javascript:


  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

So far I have manage to convert it to this in pure javascript:


  let quotes = document.getElementsByClassName("quotes");
  let quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

I am seeing an error of quotes.eq is not a function and am unsure how to fix this.

Any suggestions much appreciated.

Thanks

`quotes[quoteIndex % quotes.length]`?? All jQuery `.eq` does is "constructs a new jQuery object from one element within that set" - [jquery-eq](https://api.jquery.com/eq/), but you are still going to have problems as `.fadeIn` and `.fadeOut` are jQuery specific functions as well, so you'll need to use a pure javascript solution for those as well: [fade-in-and-fade-out-in-pure-javascript-without-jquery](https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery) — Ryan Wilson, Jan 04 '23 at 16:49
`.delay` is jQuery specific as well, so you'd need to replace that as well, and use something like `setTimeout` — Ryan Wilson, Jan 04 '23 at 16:51

score 0 · Answer 1 · answered Jan 04 '23 at 16:49

0

document.getElementsByClassName returns an HTML collection so it's like an array you can access with an index.

The elements in a collection can be accessed by index (starts at 0).

Try this

quotes[quoteIndex % quotes.length]

answered Jan 04 '23 at 16:49

Hassan Raafat

86
1
7

score 0 · Answer 2 · answered Jan 04 '23 at 16:54

eq, fadeIn and fadeOut functions are not vanilla JS functions. You can write the code like this for eq function.

document.querySelectorAll('.quotes')[quoteIndex % quotes.length].textContent = 1254;

And you should write the code in Vanilla JS for fadeIn and fadeOut. Please referent this link

Converting simple text fade loop from jQuery to Javascript

2 Answers2