Question

所以我正在寻找一种方法，只需点击一下即可删除所有列表项，但是为了给它一些很好的效果，我想让第一次滑动并删除它，一旦第一次删除就做同样的第二个列表项，依此类推，直到每个列表项都被删除。

Answer 1

以下按顺序删除列表中的所有项目：

$('button').click(function() {
    var $first = $('#list li:first')
    removeItem($first);
})


function removeItem($el) {
    $el.slideUp(function() {

        var $next = $el.next()
        if ($next.length) {
            removeItem($next)
        }
        $(this).remove()
    })
}

DEMO：http://jsfiddle.net/UzPy5/2/

单独删除可以使用

Answer 2

为所有列表项提供相同的类，然后调用$（“。yourclass”），这将返回一个数组。然后使用setInterval（http://www.w3schools.com/js/js_timing.asp）之类的内容遍历该数组这可以有你的幻灯片功能和你的时间。也许你想要滑动（http://api.jquery.com/animate/）或其他一些插件。

Answer 3

递归fadeOut列表中的每个元素。这可能没有jQuery，但你需要自己动画（或使用CSS动画）。

function fadeList(list, index) {
  if (index < list.length) {
    list[index].fadeOut(800, function() {
      fadeList(list, i+1);
    });
  }
}

$('#remove-btn').on('click', function(e) {
  fadeList($('#my-list li'),0);
 });

如何删除所有列表项，但一对一（jQuery）

3 个答案: