javascript - 两个预构建的 jQuery 动画序列都完成后,如何与单个回调并行运行?

原文 标签 javascript jquery animation

我有一些使用 jQuery animate 制作的可重用动画序列函数。我想并行运行其中的两个,从同一点触发,并在两者都完成后进行一次回调。关于我如何做到这一点的任何建议?

我想在并行中运行的两个动画序列的简单示例如下:

function deleteel(element) {
    element.parentNode.removeChild(element);
}

function animation1(inputcallback){
    var div1 = document.createElement("div");
    div1.style.position = "absolute";
    div1.style.left = "0px";
    div1.style.top = "0px";
    div1.style.width = "10px";
    div1.style.height = "10px";
    div1.style.backgroundColor="red";
    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();
                });        
            });
        });
    });
    
}

function animation2(inputcallback){
    var div1 = document.createElement("div");
    div1.style.position = "absolute";
    div1.style.left = "100px";
    div1.style.top = "100px";
    div1.style.width = "15px";
    div1.style.height = "15px";
    div1.style.backgroundColor="blue";
    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();
                });        
            });
        });
    });
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animationcontainer" style="position:relative; width:500px; height:500px; background-color:grey"></div>
<button onclick="animation1(function () { alert('Finished');})">Animation 1</button>
<button onclick="animation2(function () { alert('Finished');})">Animation 2</button>
<button onclick="">Both animations</button>

最佳答案

首先从函数返回 promise 而不是使用回调

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

然后添加适当的事件处理程序
$('#button1').on('click', function() {
    animation1().done(function() {
        alert('finished');
    });
});

对于最后一个,要处理这两个动画,您需要
$('#button3').on('click', function() {
    $.when(animation1(), animation2()).done(function() {
        alert('finished');
    });
});

FIDDLE

关于javascript - 两个预构建的 jQuery 动画序列都完成后,如何与单个回调并行运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27657613/

相关文章:

javascript - d3 - 如何在数组上设置动画

javascript - 当我添加另一个文件输入字段时,选定的文件被删除

javascript - jQuery 使用 .toggle() 切换单个元素

javascript - 网址栏ID = 1到jQuery ID

javascript - 用 JSON 数据填充多个选择框

javascript - $ .ajax错误从php文件获取数据

jquery - jQuery IF值等于显示其他显示

javascript - 未捕获的类型错误 : Cannot read property 'type' of undefined React/Redux

java - Recyclerview 不会使用大型数据集制作动画

html - CSS 动画在 Chrome 上工作,但在 Safari 上不工作