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列表项按相反顺序

回答

相关问题