jquery - The problem about usage the of animate -

i have list 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 want select of list animate effect, first of elements disappear, elements wanted display 1 one 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 elements disappear first element wanted not display?why?

then think queue,before use change little 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 former 1 $('#applications li[class="app"]') become $('#applications li'), effect elements disappear first, display again without problem!

why happened?are there ways solve problem?or achieve effect wanted thank lot!!

function filterlist($el, $filter) {     $el.fadeout(1000, function() {          if($el.next().length > 0) {             filterlist($el.next(), $filter)         } else {             $filter.fadein();         }     }); } 

and call like: filterlist($('#applications > li:first'), $('#applications > li.app'));