jQuery Cycle Through Text

index.html

<div id="cycle">
  <div>Meep</div>
  <div>Moop</div>
  <div>Beep</div>
  <div>Peep</div>
  <div>Poop</div>
  <div>Loop</div>
  <div>Neep</div>
</div>

jquery-cycle-through-text.markdown

jQuery Cycle Through Text

A Pen by waffeln on CodePen.

License.

script.js

(async () => {
  const cycleContainer = $("#cycle")

  const children = cycleContainer.children()
  children.hide()
  
  for (let i = 0; true; i++) {
    await new Promise(res => {
      children.eq(i % children.length)
        .fadeIn(400)
        .delay(1000)
        .fadeOut(400, res)
    })
  }
})()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>