如何在执行功能之前等到jquery效果循环完成

Question

Edit: The accepted answer here: How to get jQuery to wait until an effect is finished? 编辑：此处的答案：如何让jQuery等待效果完成？ does not solve my problem because the callback function is executed before the jquery ui effects have been completed. 不能解决我的问题，因为在jQuery ui效果完成之前执行了回调函数。 Also there is another answer on this thread which refers to promise() but this is only part of the answer and is missing much information. 在此线程上还有另一个答案，它引用了promise（），但这只是答案的一部分，并且缺少很多信息。

I'm trying to wait until a loop of jquery effects has fully completed animations until executing a callback function. 我正在尝试等待jquery效果循环完全完成动画，直到执行回调函数。

However it seems that the callback function is executed immediately after the last jquery effect is started, but does not wait for the animations to finish. 但是，似乎在启动最后一个jquery效果后立即执行了回调函数，但并没有等待动画完成。

I'm wondering how I can wait for the elements to be hidden using jquery drop effect for all elements in the loop, and only after the elements have been hidden completely the callback function is run. 我想知道如何才能使用jquery drop效果对循环中的所有元素隐藏元素，并且只有在元素完全隐藏之后才运行回调函数。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
    <button id="execute-button">Execute</button>
    <div id="messagebox"></div>
    <div id="1" style="background-color:blue;display:none;height:33%;width:100%;"></div>
    <div id="2" style="background-color:green;display:none;height:33%;width:100%;"></div>
    <div id="3" style="background-color:red;display:none;height:34%;width:100%;"></div>
    <div id="4" style="background-color:brown;height:33%;width:100%;"></div>
    <div id="5" style="background-color:black;height:33%;width:100%;"></div>
    <div id="6" style="background-color:gray;height:34%;width:100%;"></div>
    <script>
        $(document).ready(function(){

            function hideElements(callback){
                //hide elements
                var hideDivs = ["#4","#5","#6"];
                for(i = 0; i < hideDivs.length; i++){
                    //alert("hiding...");
                    $(""+hideDivs[i]).hide("drop",{direction:"left"},5000);
                    //alert(divs[i]);
                }
                callback();
            };

            function showElements(){
                //show elements
                var showDivs = ["#1","#2","#3"];
                //alert(JSON.stringify(divs));
                for(i = 0; i < showDivs.length; i++){
                    //alert("showing...");
                    $(""+showDivs[i]).show("drop",{direction:"right"},1000);
                    //alert(divs[i]);
                }
            }


            hideElements(showElements());

        });


        $(document).on("click","#execute-button", function(){
            //$("#messagebox").html("test");
            $("#1").show("#1");
        });
    </script>
</body>
</html>

Answer 1

In jQuery, if you use .promise() on a jQuery collection, it will return a promise that is resolved when all the elements in the collection have finished their animation. 在jQuery中，如果在jQuery集合上使用.promise() ，它将返回一个诺言，当集合中的所有元素完成其动画时，该诺言就会解决。 So, you should be able to just fire the .hide() animation on each element, then do .promise() on the collection and when that promise resolves, you can then do the other animation. 因此，您应该能够只对每个元素.promise() .hide()动画，然后对集合执行.promise() ，并且当该承诺解决时，您就可以执行其他动画了。

Here's a working snippet example: 这是一个工作片段示例：

 // returns a promise that resolves when all animations started here are done function showHide() { var items = $("#4, #5, #6"); return items.slideUp(2000).promise().then(function() { // this runs when all animations in the items collection are done return items.slideDown(2000).promise(); }); } $("#go").click(function() { showHide().then(function() { console.log("animation done"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <button id="go">Run</button> </div> <div style="height: 300px;"> <div id="4" style="background-color:brown;height:33%;width:100%;"></div> <div id="5" style="background-color:black;height:33%;width:100%;"></div> <div id="6" style="background-color:gray;height:34%;width:100%;"></div> </div>

Of course if all your first group of animations have the same timing, you can just use jQuery animation chaining (where animations for a given object go into a queue and a subsequent animation waits for the prior one to be done before starting): 当然，如果所有第一组动画都具有相同的时间安排，则可以使用jQuery动画链接（给定对象的动画进入队列，随后的动画等待上一个动画在开始之前完成）：

// returns a promise that resolves when all animations started here are done
function showHide() {
    return $("#4, #5, #6").slideUp(2000).slideDown(2000).promise();
}

如何在执行功能之前等到jquery效果循环完成

问题描述

1 个解决方案

解决方案1
4 2016-11-09 22:47:31

如何在执行功能之前等到jquery效果循环完成

问题描述

1 个解决方案

解决方案1 4 2016-11-09 22:47:31

解决方案1
4 2016-11-09 22:47:31