jQuery：fadeOut列表項按相反順序

我仍然是jQuery的初學者，我試圖達到特定的效果。我寫了一個函數，當點擊一個按鈕時，有序列表的列表項會淡入並略微延遲。在第二次點擊時，列表項淡出。下面是代碼：jQuery：fadeOut列表項按相反順序

$(document).ready(function(){ 
    var click = 0; 
    var listItems = $('.list li').length; 
    $('#run').click(function(){ 
    click++; 
    console.log(listItems); 
    var on = function(i){ 
     return(i % 2 === 0) ? true : false; 
    }; 

    if(on(click) === false){ 
    $('.list li').each(function(i){ 
    $(this).delay(i*500).fadeIn(100); 
    }); 
} else if (on(click) === true) { 
    $('.list li').each(function(i){ 
    $(this).delay(i*500).fadeOut(100); 
    }); 
    } 
}); 
});

列表項淡出開始的第一個項目，但我想要的物品，以相反的順序淡出。我90％確定我需要使用.length;函數，所以我已經爲它分配了一個變量。

如果有人可以幫忙，我會很感激！

來源

2016-09-22 massanisso

爲了扭轉組匹配順序，可以use。順便說一句，你應該在每次調用之前調用dequeue()到delay()：

$($('.list li').get().reverse()).each(function(i){ 
    $(this).dequeue().delay(i*500).fadeOut(100); 
});

來源

2016-09-22 16:45:51

我跟着那個鏈接，碰到了這個迷你jQuery插件： jQuery.fn.reverse = [] .reverse; 哪個技巧！ – massanisso

雅，這是相同的東西 –

非常感謝您的幫助！ – massanisso

我會使用一個反向順序for環 - 所以不是這樣的：

$('.list li').each(function(i){ 
$(this).delay(i*500).fadeOut(100); 
});

我想試試這個：

var li_items = document.getElementByClassName("list").getElementsByTagName("LI"), 
    count = li_items.length, 
    last_item = count - 1, 
    i, t; 

for(i = last_item; i > -1; i--) { 
    t = li_items[i]; 
    $(t).delay(i*500).fadeOut(100); 
}

來源

2016-09-22 16:43:22

嗯，我試圖添加此功能，儘管有一些你變量的jQuery'd「，但無濟於事 [的jsfiddle（HTTPS： //jsfiddle.net/acmpub27/） – massanisso

好的 - 對不起，不知道出了什麼問題。但我看到你使用的插件工作，所以我很高興你找到了解決方案 –

不用擔心，謝謝你的幫助！ – massanisso

jQuery：fadeOut列表項按相反順序

回答

相關問題