i would like to ask how to make loop fadeIn and fadeout every 2 items from unorder list. I trying to do this with jQuery but my loop only take 1 by 1 item.

<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>

My javaScript code. I try to split array for 2 elements each array then im trying to fade out it.

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);
}

CodePudding user response：

Using .slice() you can select a range of elements, then each time increase the start of that range.

With the help of this question to call a function when all elements have finished .fadeOut() (otherwise you get a callback per element), gives:

var items = $("ul>li");
var pos = 0;
var count = 2;

items.hide().slice(pos, pos count).show();
setInterval(() => {
  $.when(items.slice(pos, pos count).fadeOut())
    .then(function() {
      pos  = count;
      if (pos>items.length) 
        pos = 0;
      items.slice(pos, pos count).fadeIn();
    });
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
   <li>item1</li> 
   <li>item2</li> 
   <li>item3</li> 
   <li>item4</li> 
   <li>item5</li> 
  </ul>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

There are, of course, many different ways to do this, for example using $("ul>li").each((idx) => and comparing the idx (index) value or using a setTimeout instead of the $.when to fadeIn when fadeOut has completed.

CodePudding user response：

If you are just doing two list items together each time:

In your for loop increment i by 2 each time and set i and i 1 to visible, fadein and the rest to hidden, fadeout. With your example have 5 items, I would put a check to make sure the i 1 is not greater than your set list length.

for(i=0;i<list_length;i =2){
  //Add fade out ability here if you want it to happen before the fadein    
  $(list[i]).fadin();
  $(list[i 1]).fadein();
  //Add fade out ability here if you want it to happen after the fadein
}

If you are no just make every other item in your list fade in and out. Set an id for the ones you want to pair together, then loop over your list and fadein and fadeout which ones want active at a time. If this is the option you are looking for I can add some example code but I think you are looking for the first option.