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, 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 — Ryan Wilson
– Ryan Wilson, Commented Jan 4, 2023 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
– Ryan Wilson, Commented Jan 4, 2023 at 16:51

Hassan Raafat · Accepted Answer · 2023-01-04 16:49:40Z

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 4, 2023 at 16:49

Hassan Raafat

861 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ninja Work · Accepted Answer · 2023-01-04 16:54:05Z

0

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

answered Jan 4, 2023 at 16:54

Ninja Work

7095 silver badges11 bronze badges

Collectives™ on Stack Overflow

Converting simple text fade loop from jQuery to Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related