For my app's home page, I want to display a rotating list of ten items at a time. The displayed items should switch to the next set of ten items after a few seconds.
Currently, I have code that does this for one item, but I'm struggling to make it work for all ten items simultaneously.
var j = 0;
var inbetween = 2000; //milliseconds
function page() {
var jmax = $("ul#list li").length - 1;
var count = 10;
$("ul#list li:eq(" + j + ")")
.animate({
"opacity": "1"
}, 400)
.delay(inbetween)
.animate({
"opacity": "0"
}, 400, function() {
(j == jmax) ? j = 0: j++;
page();
});
};
page(); ul#list {
width: 200px;
border: solid;
position: relative;
overflow: hidden;
height: 200px
}
ul#list li {
font-size: 1.4em;
padding: 20px;
opacity: 0;
position: absolute
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='list'>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eliven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
<li>sixteen</li>
<li>seventeen</li>
<li>eighteen</li>
<li>ninteen</li>
<li>twenty</li>
</ul>A jsFiddle demo is available here.
Any suggestions or assistance would be greatly appreciated!