Question

I have a list for example
Copy code

   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>

then I want a select some of the list with some animate effect,
first the all of the elements would disappear,
then the elements that I wanted would display one by one
the code:
Copy code

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

the final effect is that all the elements would disappear first
but the element I wanted would not display?why?

then I think about the queue,before I use it I change a little about the code:
Copy code

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

the different part from the former one is that $(‘#applications li[class=”app”]’) become $(‘#applications li’),
the effect is that all the elements would disappear first,
then all the would display again without any problem!

why this happened?Are there some ways to solve the problem?Or achieve the effect I wanted
Thank a lot!!

Answer 1

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

And call it like: filterList($('#applications > li:first'), $('#applications > li.app'));