Question

我有一个列表例如复制代码

   1.  <ul id="applications">
   2.       <li id="id-1" class="util"></li>
   3.       <li id="id-1" class="app"></li>
   4.       <li id="id-1" class="util"></li>
   5.       <li id="id-1" class="app"></li>
   6. </ul>

然后我想要选择一些带有一些动画效果的列表，首先，所有元素都会消失，然后我想要的元素将逐一显示代码：复制代码

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li[class="app"]').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

最终效果是所有元素都会先消失但我想要的元素不会显示？为什么？

然后我想到了队列，在我使用之前我改变了一些代码：复制代码

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

与前者的不同之处在于 $（'#litil li [class =“app”]'）成为$（'#applications li'），结果是所有元素都会先消失，那么所有的东西都会毫无问题地显示出来！

为什么会发生这种情况？有没有办法解决问题？或者达到我想要的效果非常感谢！！

Answer 1

function filterList($el, $filter) {
    $el.fadeOut(1000, function() { 
        if($el.next().length > 0) {
            filterList($el.next(), $filter)
        } else {
            $filter.fadeIn();
        }
    });
}

并称之为：filterList($('#applications > li:first'), $('#applications > li.app'));

关于使用动画的问题

1 个答案: