animate的使用问题

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.              });

与前一个不同的部分是 $('#applications 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'));