Me gustaría preguntar cómo hacer que el bucle se desvanezca y se desvanezca cada 2 elementos de la lista sin ordenar. Intento hacer esto con jQuery pero mi ciclo solo toma 1 por 1 elemento.
<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>Mi código JavaScript. Intento dividir la matriz para 2 elementos cada matriz y luego trato de desvanecerla.
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); }Usando .slice() puede seleccionar un rango de elementos, luego cada vez aumentar el inicio de ese rango.
Con la ayuda de esta pregunta para llamar a una función cuando todos los elementos hayan terminado .fadeOut() (de lo contrario, obtendrá una devolución de llamada por elemento), da:
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> Hay, por supuesto, muchas formas diferentes de hacer esto, por ejemplo, usando $("ul>li").each((idx) => y comparando el valor de idx (índice) o usando setTimeout en lugar de $.when a fadeIn cuando se ha completado fadeOut.
Si solo está haciendo dos elementos de la lista juntos cada vez:
En su bucle for, incremente i en 2 cada vez y establezca i e i+1 en visible, fundido y el resto en oculto, fundido. Con su ejemplo, tiene 5 elementos, pondría una marca para asegurarme de que i+1 no sea mayor que la longitud de su lista establecida.
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 }Si no es así, simplemente haga que todos los demás elementos de su lista aparezcan y desaparezcan. Establezca una identificación para los que desea emparejar, luego recorra su lista y desvanezca y desvanezca cuáles desea activar a la vez. Si esta es la opción que está buscando, puedo agregar un código de ejemplo, pero creo que está buscando la primera opción.