Question

I'm trying to randomlly show some words on a <span>, I have the jQuery with the Fade effect but I am not beeing able to make those words become random.

I don't know where Im doing wrong, I've saw this here on Stack but its not working...

Help!

Javascript

 var words = [
    '',
    'Special',
    'Dynamic',
    'Simple',
    'Great',
    'Better',
    'Stronger',
    'Stylish',
    'Flawless',
    'Envied',
    'Strong',
    'Sucessful',
    'Grow',
    'Innovate',
    'Global',
    'Knowledgable',
    'Unique',
    'Trusted',
    'Efficient',
    'Reliable',
    'Stable',
    'Secure',
    'Sofisticated',
    'Evolving',
    'Colorful',
    'Admirable',
    'Sexy',
    'Trending',
    'Shine',
    'Noted',
    'Famous',
    'Inspiring',
    'Important',
    'Bigger',
    'Stylish',
    'Expand',
    'Proud',
    'Awesome',
    'Solid'
    ], i = 0;

    var getRandomWord = function () {
    return words[Math.floor(Math.random() * words.length)];
    };

setInterval(function(){

    $('.textbox').fadeOut(500, function(){

        $(this).html(words[i=(i+1)%words.length]).fadeIn(500);
    });
   // 2 seconds
}, 5000);
Was it helpful?

Solution

You need to

a) wait till page has loaded

b) use the function you defined

Live Demo

$(function() { // after page load
  setInterval(function(){
    $('.textbox').fadeOut(500, function(){
      $(this).html(getRandomWord()).fadeIn(500);
    });
  // 5 seconds
  }, 5000);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top