Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery отслеживание завершения нескольких анимации

Автор: Frozen_Coyote 11.6.2013, 13:58

Приветствую,

подскажите - возможно ли мне каким то образом, может через $.when или как то через коллбэк (как?) отследить завершение нескольких анимаций, которые стартуют в неком цикле? Пример

Код



for(var x = 0; x < col; x++)
{
       $("#id" + x).animate( 
       {
           "top": "100px" 
        }, 300);
}

Дело в том, что количество анмимаций заранее неизвестно - может подскажете какой то другой способ формирования списка анимаций и старта оных с последующим перехватом? Через $.when then схема работат (ну во всяком случае, как я смог допереть) если четко в условие вставляешь фиксированное количество анимашек типа

Код


$.when(

$("#id1").animate( 
       {
           "top": "100px" 
        }, 300),

$("#id2").animate( 
       {
           "top": "100px" 
        }, 300);

).then( alert('Все отбегались') );

а как быть с динамическим количеством анимаций?

спасибо!

Автор: z-END 11.6.2013, 14:01

может так...

Код


 $("#id" + x).animate( {"top": "100px" }, 300,function(){
if ($(this).not(':animated')) alert('animation ends');
});

Автор: Frozen_Coyote 11.6.2013, 14:11

как мне видится данный код будет по завершению КАЖДОЙ анимашки радостно уведомлять о завершении анимации данного эземпляра, а мне же необходимо чтобы при завершении динамического количества запущенных анимаций был ЕДИНЫЙ перехват завершения ВСЕХ анимаций. Ну т.е. все отбегались и на экране ОДИН ОБЩИЙ alert('Анимация всех завершилась'). Или я неправ?

Автор: z-END 11.6.2013, 14:23

Цитата(Frozen_Coyote @ 11.6.2013, 15:11

)

Или я неправ?

всякое бывает)

но если в рамках callback окончания анимации селектор :animated срабатывает некорректно, а оборачивать его в setTimeout лень, то тогда в помощь queue dequeue )

Автор: Frozen_Coyote 11.6.2013, 14:26

дело не в лени а в грамотном решении задачки с минимальными нагрузками на проц )) спасибо )

Автор: Amphiluke 11.6.2013, 15:02

Цитата(Frozen_Coyote @ 11.6.2013, 17:58

)

Через $.when then схема работат

Цитата(Frozen_Coyote @ 11.6.2013, 17:58

)

а как быть с динамическим количеством анимаций?

Очень просто можно реализовать и через $.when(). Добавляйте соответствующие анимациям Promise-объекты в динамический массив, а затем применяйте метод $.when при помощи apply. Мне кажется, это решение через $.Deferred вполне себе элегантное.

Код


var promises = [];
for(var x = 0; x < col; x++) {
    promises.push($("#id" + x).animate({top: "100px"}, 300));
}
$.when.apply($, promises).done(function () {
    alert('Все отбегались');
});

Автор: Frozen_Coyote 11.6.2013, 15:21

Цитата(Amphiluke @ 11.6.2013, 15:02

)

Мне кажется, это решение через $.Deferred вполне себе элегантное.

вот спасибо уважаемый! получилось в лучшем виде!!!! Спасибо!