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:

<div>
    <span>This is so</span>
    <span>awesome</span>
</div>

... and I want the awesome to change into cool,fantastic,incredible and keep cycling with loop using fadeOut/fadeIn effect maybe?

Is it possible?

Thanks alot

Answer 1

Apply an ID to the span and change its contents using .text() or .html()

<div>
  <span>This is so</span>
  <span id="container">awesome</span>
</div>


var texts = new Array();
texts[0] = "cool";
texts[1] = "awesome";
var i = 0;

function changeText()
{
   $("#container").fadeOut("fast", function(){
     $(this).html(texts[i++]);
     $(this).fadeIn();
   });

   if(i > texts.length)
     i = 0;
}
setInterval('changeText()', 2000);

Answer 2

     $(document).ready(function(){ 
                setInterval(function(){
                      var current = jQuery(".animate-span .active");
                      var cIndex = jQuery(".animate-span span").index(current), cLength = jQuery(".animate-span span").length, nextSpan = null;
                      if(cIndex<(cLength-1)){
                       nextSpan =   jQuery(".animate-span span").eq(cIndex+1)        
                       }else{
                     nextSpan = jQuery(".animate-span span").eq(0);
                }
                     nextSpan.animate({top:0,opacity:1},500).addClass("active");

                      current.animate({top:45,opacity:0},500,function(){
                        jQuery(this).css({top:-40});
                    }).removeClass("active");
                },2000)
            });   

live demo here

Answer 3

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>This is so</span>
  <span id="wordChanger">awesome</span>
</div>

---

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;
}

<div>
  <span>This is so</span>
  <span id="wordChanger">awesome</span>
</div>

---

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 }
}

<div>
  <span>This is so</span>
  <span id="wordChanger"></span>
</div>

Answer 4

(function(){

    // List your words here:
    var words = [
        'awesome',
        'incredible',
        'cool',
        'fantastic'
        ], i = 0;

    setInterval(function(){
        $('#changerificwordspanid').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 seconds
    }, 2000);

})();

Give your span an id, and change changerificwordspanid to the id of the span.

JSFiddle Example here

Answer 5

You can easily do this using setInterval and few lines of code.

Working demo

var keywords = ["awesome", "cool", "fantastic", "incredible"];
var count = 1;
setInterval(function(){    
    $("span.keyword").fadeOut(400, function(){        
        $(this).html(keywords[count]);        
        count++;        
        if(count == keywords.length)            
            count = 0;        
        $(this).fadeIn(400);    
    });
}, 2000);

Answer 6

This should work. First, add an id to the span that you want to rotate the text on. E.g.,

<span id="rotate-word">awesome</span>

And in your JavaScript:

$(function() {
    var words = ['cool', 'fantastic', 'incredible', 'awesome'],
        index = 0,
        $el = $('#rotate-word')
    setInterval(function() {
        index++ < words.length - 1 || (index = 0);
        $el.fadeOut(function() {
            $el.text(words[index]).fadeIn();
        });
    }, 3000);
});

You can see this in action here: http://jsfiddle.net/DMeEk/