jquery - 当前函数的所有动画完成后触发事件

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