Проблема об использовании анимации - PullRequest
Новая
       16

Проблема об использовании анимации

0 голосов
/ 15 ноября 2010

У меня есть список, например Скопировать код 

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

отличие от предыдущего состоит в том, что $ ('# application li [class = "app"]') становится $ ('# application li') , эффект состоит в том, что все элементы исчезнут первыми, тогда все будет отображаться снова без проблем!

почему это произошло? Есть ли способы решить проблему? Или добиться желаемого эффекта Большое спасибо!!

1 Ответ

0 голосов
/ 15 ноября 2010 
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'));

...