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);
You need to
a) wait till page has loaded
b) use the function you defined
$(function() { // after page load
setInterval(function(){
$('.textbox').fadeOut(500, function(){
$(this).html(getRandomWord()).fadeIn(500);
});
// 5 seconds
}, 5000);
});