Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time.
<div>
<ul>
<li>item1</li> // will be first display
<li>item2</li> // will be first display
<li>item3</li> // will be second display
<li>item4</li> // will be second display
<li>item5</li> // will be third display
</ul>
</div>
This is the JavaScript code I came up with. I attempted to split the array into chunks of 2 elements each and then fade them out:
function slide(elements) {
var perChunk = 2
var inputArray = Array.from(elements[0].children);
var result = inputArray.reduce((resultArray, item, index) => {
const chunkIndex = Math.floor(index/perChunk)
if(!resultArray[chunkIndex]) {
resultArray[chunkIndex] = []
}
resultArray[chunkIndex].push(item)
return resultArray
}, [])
console.log('res',result);
$(inputArray).hide();
setInterval(function() {
result.map(el => {
$(el).show().fadeIn();
});
}, 2000);
}