Javascript 当两个jQuery动画序列都完成时，如何使用单个回调并行运行两个预构建的jQuery动画序列？

我用jqueryanimate制作了一些可重用的动画序列函数。我想并行运行其中两个，从同一点触发，在两个都完成后使用一个回调。有什么建议吗

下面是一个简单的示例，其中有两个动画序列，我想并行运行：

函数deleteel（元素）{
element.parentNode.removeChild（元素）；
}
函数animation1（inputcallback）{
var div1=document.createElement（“div”）；
div1.style.position=“绝对”；
div1.style.left=“0px”；
div1.style.top=“0px”；
div1.style.width=“10px”；
div1.style.height=“10px”；
div1.style.backgroundColor=“红色”；
document.getElementById（“animationcontainer”）.appendChild（div1）；
$（div1.animate（{top:“50”}，“slow”，function（））{
$（div1.animate（{left:+50}，“slow”，function（））{
$（div1）.animate（{top:“20”，left:“0”}，“slow”，function（））{
$（div1）.animate（{height:“50”，top:“110”，left:“0”}，“slow”，function（））{
$（div1.remove（）；
inputcallback（）；
});        
});
});
});
}
函数动画2（inputcallback）{
var div1=document.createElement（“div”）；
div1.style.position=“绝对”；
div1.style.left=“100px”；
div1.style.top=“100px”；
div1.style.width=“15px”；
div1.style.height=“15px”；
div1.style.backgroundColor=“蓝色”；
document.getElementById（“animationcontainer”）.appendChild（div1）；
$（div1.animate（{top:“10”}，“fast”，function（））{
$（div1.animate（{left:+60}，“slow”，function（））{
$（div1）.animate（{top:“200”，left:“100”}，“slow”，function（））{
$（div1）.animate（{width:“50”，top:“10”，left:“100”}，“slow”，function（））{
$（div1.remove（）；
inputcallback（）；
});        
});
});
});
}

动画1
动画2
两个动画都可以使用jquery的延迟

$.when(
    $element1.animate(...).promise(),
    $element2.animate(...).promise()
).done(function() {
    alert("Both animations are finished");
});


var$el1=$（'#el1'），
$el2=$（“#el2”）；
美元。什么时候(
$el1.animate（{'left'：100}）.promise（），
$el2.animate（{'left'：200}，2000）.promise（）
).done（函数（）{
警报（“两个动画都已完成”）；
});
#el1，#el2{位置：绝对；顶部：0；左侧：0；宽度：100px；高度：100px；背景：红色}
#el2{背景：蓝色；顶部：100px}
从函数返回承诺开始，而不是使用回调

function animation1(){
    var div1 = $("<div />", {
        css : {
            position   : 'absolute',
            left       : '0px',
            top        : '0px',
            width      : '10px',
            height     : '10px',
            background : 'red'
        }
    });

    $("#animationcontainer").append(div1);

    return div1.animate({top    : "50" }, "slow")
               .animate({left   : "+50"}, "slow")
               .animate({top    : "20", left : "0" }, "slow")
               .animate({height : "50", top  : "110", left: "0"}, "slow")
               .promise()
               .done(function() {
                   $(this).remove();
               });
}

对于最后一个，要处理这两个动画，您需要

$('#button3').on('click', function() {
    $.when(animation1(), animation2()).done(function() {
        alert('finished');
    });
});

如果我能理解，您希望在动画完成后运行相同的回调，但只运行一次。下面的代码将完成此操作。这有点老派，但很管用

我们需要以某种方式确定我们已经运行了回调。因此，我们将一个令牌传递给callback。然后，它标识是否存在令牌（表示不运行该令牌），并删除令牌和运行代码

var tokens = [];

function animCallback(token) {

  var i = tokens.indexOf(token);

  if (i < 0) {
    //token already removed
    return;
  }

  tokens.splice(i, 1);

  alert('finished');
}

function animateBoth() {
  tokens.push('mytoken');
  animation1(function() {
    animCallback('mytoken');
  });
  animation2(function() {
    animCallback('mytoken');
  });
}

var令牌=[]；
函数回调（令牌）{
var i=代币。indexOf（代币）；
if（i<0）{
//令牌已被删除
返回；
}
标记.拼接（i，1）；
警报（“完成”）；
}
函数animateBooth（）{
tokens.push（'mytoken'）；
动画1（函数（）{
自动回调（“mytoken”）；
});
动画2（函数（）{
自动回调（“mytoken”）；
});
}


函数deleteel（元素）{
element.parentNode.removeChild（元素）；
}
var标记=[]；
函数回调（令牌）{
var i=代币。indexOf（代币）；
if（i<0）{
//令牌已被删除
返回；
}
标记.拼接（i，1）；
警报（“完成”）；
}
函数animateBooth（）{
tokens.push（'mytoken'）；
动画1（函数（）{
自动回调（“mytoken”）；
});
动画2（函数（）{
自动回调（“mytoken”）；
});
}
函数animation1（inputcallback）{
var div1=document.createElement（“div”）；
div1.style.position=“绝对”；
div1.style.left=“0px”；
div1.style.top=“0px”；
div1.style.width=“10px”；
div1.style.height=“10px”；
div1.style.backgroundColor=“红色”；
document.getElementById（“animationcontainer”）.appendChild（div1）；
$（第1部分）。设置动画({
前50名
}，“慢”，函数（）{
$（第1部分）。设置动画({
左：“+50”
}，“慢”，函数（）{
$（第1部分）。设置动画({
顶部：“20”，
左：“0”
}，“慢”，函数（）{
$（第1部分）。设置动画({
身高：“50”，
顶部：“110”，
左：“0”
}，“慢”，函数（）{
$（div1.remove（）；
inputcallback（）；
});
});
});
});
}
函数动画2（inputcallback）{
var div1=document.createElement（“div”）；
div1.style.position=“绝对”；
div1.style.left=“100px”；
div1.style.top=“100px”；
div1.style.width=“15px”；
div1.style.height=“15px”；
div1.style.backgroundColor=“蓝色”；
document.getElementById（“animationcontainer”）.appendChild（div1）；
$（第1部分）。设置动画({
前十名：“10”
}，“快速”，函数（）{
$（第1部分）。设置动画({
左：“+60”
}，“慢”，函数（）{
$（第1部分）。设置动画({
顶部：“200”，
左：“100”
}，“慢”，函数（）{
$（第1部分）。设置动画({
宽度：“50”，
前十名：，
左：“100”
}，“慢”，函数（）{
$（div1.remove（）；
inputcallback（）；
});
});
});
});
}

两个动画
动画1
动画2
如果您愿意，也可以用纯js的方式来完成，不像承诺和延迟那样优雅，但仅供参考


var calledOnce=false；
函数doBoth（）{
setTimeout（doAnimation1，1）；
setTimeout（doAnimation2，1）；
}
函数doAnimation1（）{
动画1（cb）；
}
函数doAnimation2（）{
动画2（cb）；
}
函数cb（）{
如果（！calledOnce）{
calledOnce=true；
返回；
}
警报（“完成一次”）；//或在此处回拨自定义呼叫。
警报（“t
var tokens = [];

function animCallback(token) {

  var i = tokens.indexOf(token);

  if (i < 0) {
    //token already removed
    return;
  }

  tokens.splice(i, 1);

  alert('finished');
}

function animateBoth() {
  tokens.push('mytoken');
  animation1(function() {
    animCallback('mytoken');
  });
  animation2(function() {
    animCallback('mytoken');
  });
}