jQuery: Find word and change every few seconds

Question

How can I change a word every 2-3 seconds using jQuery?

For example:

I have this:

    This is so
    <         


        
      

Answer 1

JQuery: jsfiddle

var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
  ],
  i = 0;

setInterval(function() {         // \/ \/ callback function
  $('#wordChanger').fadeOut(400, function() {
                      // if i = last index ? i = 0 else i++
    $(this).text(words[ (i === words.length - 1) ? i = 0 : i += 1] ).fadeIn(400);
  });
}, 2000);

#wordChanger {
  color: #f35537;
}

  This is so
  awesome

---

Pure JavaScript: codePen

• Make a class which hold the opacity 0 and transition.
• Set timeout equal to transition duration , then change the text and remove the fade out class in it
• Loop it with interval

window.onload = function () {

  'use strict';

  var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
  ], 
      i = 0,
      wordChanger = document.querySelector('#wordChanger');

  setInterval(function () {
    wordChanger.classList.add('fadeOut');

    // timeout equal to transition duration
    setTimeout(function () {
      wordChanger.textContent = words[ (i === words.length - 1) ? i = 0 : i += 1];
      wordChanger.classList.remove('fadeOut');
    }, 400);

  }, 2000);
};

#wordChanger {
  opacity: 1;
  transition: opacity .4s ease;
  color: #f35537;
}

#wordChanger.fadeOut {
  opacity: 0;
  transition: opacity .4s ease;
}

  This is so
  awesome

---

Pure CSS: codePen

• Make a :before pseudo with content with your first word
• Give it animation with:
  • Reverse direction To make it cycle forwards
  • Duration equal to [ 2s ( interval duration ) + .8s (.4s fadeIn | .4s fadeOut ) ] * 4 ( elements number ) = 11.2s
  • Setting animation percentage:
    • Divide 100% on 4 elements ( 25% increment for each content )
    • Subtract 5% from each first/last content percentage to make transition

#wordChanger {
  color: #f35537;
}

#wordChanger:before {
  content: 'awesome';
  animation: changeText 11.2s ease reverse forwards infinite
}

@keyframes changeText {
  100% { content: 'awesome'; opacity: 0 }
  95% { content: 'awesome'; opacity: 1 }
  80% { content: 'awesome'; opacity: 1}
  76% { content: 'awesome'; opacity: 0 } 

  75% { content: 'incredible'; opacity: 0 }
  70% { content: 'incredible'; opacity: 1 }
  55% { content: 'incredible'; opacity: 1 }
  51% { content: 'incredible'; opacity: 0 }

  50% { content: 'cool'; opacity: 0 }
  45% { content: 'cool'; opacity: 1 }
  30% { content: 'cool'; opacity: 1 }
  26% { content: 'cool'; opacity: 0 }

  25% { content: 'fantastic'; opacity: 0 }
  20% { content: 'fantastic'; opacity: 1 }
  5% { content: 'fantastic'; opacity: 1 }
  0% { content: 'fantastic'; opacity: 0 }
}

  This is so