You can create an array
of words then loop through the array index with setInterval
and use jQuery slideUp
- slideDown
for the animation.
html:
<p>Build and cultivate your own community of</p>
<div id="word">customers</div>
script:
var words = ['followers', 'fans', 'members', 'customers'];
var index = 0;//start with 0, first array index is 0
var $word = $('#word');
setInterval(function () {
if (index == words.length) {
//if current index is equal to the arrays length reset it to 0
index = 0;
}
//slideUp to hide
$word.slideUp(500, function () {
//on animation complete hidden change the text then slideDown to show
$word.text(words[index]).slideDown(500);
/*
It's always a good practice to separate increment/decrement
in a single line, as it might confuse some(especially new) programmers
*/
index++;
});
}, 2000);
See this jsfiddle.
You can use <span>
but it will create a different effect because <span>
is an inline element (check this jsfiddle). You need to set it to display:block
to achieve the desired effects - jsfiddle demo.