jQuery - LI fadeIn and fadeOut
See update #2 for fadeOut
by katalin_2003
HTML
<ul class="homepageTabs">
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
</ul>
CSS
ul {
list-style-type:none;
}
/*li{
display:inline;
}*/
JavaScript
var titles1 = document.querySelector(".homepageTabs").getElementsByTagName("li");
console.log(titles1[1]);
function fadeInTitles(titles1, timeOut) {
var timeOut = 1500; //timeOut || 1500;
var len = titles1.length,
currentItem = 0;
function showTitle() {
$(titles1[currentItem]).fadeOut("slow");
currentItem += 1;
if (currentItem < len) setTimeout(showTitle, timeOut);
}
showTitle();
}
fadeInTitles(titles1);