我想問一下如何從無序串列中每 2 個專案進行回圈淡入和淡出。我試圖用 jQuery 來做到這一點，但我的回圈只需要 1 x 1 項。
<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>
我的 JavaScript 代碼。我嘗試將每個陣列拆分為 2 個元素，然后我嘗試淡出它。
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);
}
uj5u.com熱心網友回復：
使用.slice()您可以選擇一系列元素，然后每次增加該范圍的開始。
在這個問題的幫助下，當所有元素都完成時呼叫一個函式.fadeOut()（否則你會得到每個元素的回呼），給出：
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>當然，有許多不同的方法可以做到這一點，例如使用$("ul>li").each((idx) =>和比較 idx（索引）值或setTimeout在$.when淡入淡出完成時使用代替淡入淡出。
uj5u.com熱心網友回復：
如果您每次只是將兩個串列項放在一起：
在您的 for 回圈中，每次將 i 增加 2，并將 i 和 i 1 設定為可見、淡入，其余設定為隱藏、淡出。對于您的示例有 5 個專案，我會進行檢查以確保 i 1 不大于您設定的串列長度。
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
}
如果你不是，就讓串列中的所有其他專案淡入淡出。為您想要配對的那些設定一個 id，然后回圈遍歷您的串列以及一次想要激活的淡入淡出。如果這是您正在尋找的選項，我可以添加一些示例代碼，但我認為您正在尋找第一個選項。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/341452.html
標籤：javascript html 查询 css
上一篇：可以使用表單中的單選按鈕選擇同一表單中的另一個單選按鈕嗎？
下一篇：只在當前div觸發事件