Запустить событие после завершения всех анимаций из текущей функции

Question

Я пытался заставить функцию срабатывать только после того, как все элементы .animate() функции были завершены, включая задержку и ослабление.

Я пробовал несколько разных методов без удачи, есть идеи?

  $("#inner_work").on("mouseenter", ".activeBox", function(){
        var thisBox = $(this).attr('id');
        $("#inner_work [class^='workBox_']").each(function(){
            if($(this).attr('id') != thisBox){
                $(this).stop().delay(randomEasing(200,800)).animate({
                    opacity:0
                }, randomEasing(200,700));
            } else {
                $(this).stop().animate({
                    opacity:1
                }, 'fast');
            }
        }); 
  });

Как вызвать событие ПОСЛЕ того, как анимация завершена?

randomEasing только эта функция, чтобы сделать ее в случайном порядке

function randomEasing(from,to)
{
    return Math.floor(Math.random()*(to-from+1)+from);
}

Answer 1

Вы можете использовать отложенные объекты и запросить .promise() зарегистрировать обратный вызов, который будет вызываться только после завершения всех анимаций для каждого элемента в коллекции:

$("#inner_work [class^='workBox_']").promise().done(function() { 
     ...
});

Это может быть связано с вашим существующим кодом:

$("#inner_work [class^='workBox_']").each(function() {
    // your existing animation code
}).promise().done(function() {
    ...
});