Выполнить код после завершения всех «завершенных» функций в списке

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть список, который я анимирую, чтобы он исчезал. После завершения этого я хочу запустить некоторый код, но хочу запускать код один раз, а не каждый раз, когда анимация каждого элемента в списке завершается. Код должен быть запущен после завершения ВСЕЙ анимации и удаления всех li . Вот мой текущий код:

 $(".myclass li").animate({'opacity':'0', 'height':'0%'}, function(){
    $(this).remove(); //This is run for every "li" which is fine...

    function() { /* I want to now run this code only once AFTER all animation has finished */ }
});
  

Комментарии:

1. Возможно, вы захотите взглянуть на .one() : api.jquery.com/one

Ответ №1:

$.queue () должен помочь вам в этом. http://api.jquery.com/queue /

 $(".myclass li").animate({'opacity':'0', 'height':'0%'},{"queue":true});
$(".myclass li:last-child").queue(function() {
    /* The code you want to run */
});
  

Комментарии:

1. $(«.myclass li»).animate({‘непрозрачность’:’0′, ‘высота’:’0%’}); $(«. myclass li»). очередь (обратный вызов);

2. Это действительно лучшее решение этой проблемы. Вам не нужно считать или что-то еще. Просто поместите анимации в очередь, а затем поставьте в очередь обратный вызов.

3. Я думаю, с этим есть небольшая проблема — я удаляю каждое li значение, которое li:last-child является недопустимым, после завершения операции… Какова бы ни была причина, он запускает код дважды при первом запуске и никогда не запускается после этого… Есть идеи?

Ответ №2:

Одним из возможных решений было бы:

 var elts=$$(".myclass li"),
    num=elts.length,
    onComplete=function() { 
        ...
    };

elts.animate({....}, function(){
   $(this).remove();
   if(--num === 0 amp;amp; onComplete) {
       onComplete();
   }
});