Question

我的函数有不同的执行路径，可能会调用一个或多个.animate jQuery方法。这些动画应该同时开始，不应该序列化。例如：

function moveDown()
{
    busy = true;
    if(some condition)
    {
        $(".selFrame").animate({top: $("#row" + currentSelRowIndex).offset().top});
    }
    else
    {
        $(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top - $("#row0").offset().top});
        $(".selFrame").animate({top: ($(".selFrame").offset().top + ch - remaining)});
    }
}

我的目标是使用某个busy变量检测是否所有动画都已完成，无论我们通过哪个排除路径。对于一个动画调用，可以轻松重置动画busy上的complete变量。但是，我不确定如何将两个或更多动画合并到一个事件中，我可以重置busy变量，以确保完成所有动画。

更新

不幸的是，经过全面测试后，过滤解决方案没有给出好的结果。

document.addEventListener('keydown', function(e) {
    var runningAnimations = $(".container, .selFrame").filter(":animated").length;
    if(runningAnimations == 0)
    {
        switch(e.keyCode)
        {
        case 40: 
            moveDown();
            break;

它比没有，但有时候，在允许重新进入的双动画案例中效果要好得多。

我打算用promise尝试第二种方法。

Answer 1

您可以使用包含动画数量的整数，并在每个动画的回调中减去一个，或检查其值是否为1：

    if(some condition)
    {
        busy = 1;
        $(".selFrame").animate({top: $("#row" + currentSelRowIndex).offset().top} , function(){
             busy--;
        });
    }
    else
    {
        busy = 2;
        $(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top - $("#row0").offset().top}, function(){
             if(busy == 1) // all the animations have ended
             busy--;
        });

        $(".selFrame").animate({top: ($(".selFrame").offset().top + ch - remaining), function(){
             if(busy == 1) // all the animations have ended
             busy--;
        }});
    }

您还可以将:animated选择器与setTimeOut：

一起使用

setTimeOut(function(){
    var runningAnimations = $( ".container, .selFrame" ).filter( ":animated" ).length;
   }, 500);

Answer 2

如果您希望在与元素集合相关的所有动画完成后收到通知，您可以使用promise：

$(".container, .selFrame").promise().then(function(){
      // all finished
      // we may change a boolean but usually we would call a callback
});

例如，这可以在if/else。

之后

如何分组2个jQuery动画的完整回调？

2 个答案: