The problem about usage the of animate

The problem about usage the of animate

I have a list for example
  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:
  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:
  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 yellow part is the different from the former one,
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!!