関数を実行する前にjqueryエフェクトのループが終了するまで待つ方法

編集：受け入れられた答えはHow to get jQuery to wait until an effect is finished?です。jquery UIエフェクトが完了する前にコールバック関数が実行されるため、How to get jQuery to wait until an effect is finished?が問題を解決しません。また、promise（）を参照するこのスレッドの別の答えがありますが、これは答えの一部であり、多くの情報がありません。関数を実行する前にjqueryエフェクトのループが終了するまで待つ方法

jqueryエフェクトのループがコールバック関数を実行するまでアニメーションを完全に完了するまで待機しようとしています。

しかし、コールバック関数は、最後のjqueryエフェクトが開始された直後に実行されますが、アニメーションが終了するのを待たないようです。

ループ内のすべての要素に対してjqueryドロップエフェクトを使用して要素が非表示になるのを待つことができ、要素が完全に非表示になった後でコールバック関数が実行された後に、 jQueryので

<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>

出典

2016-11-08 Trevor

hideイベントが終了したときに応答するコールバックを使用する必要があります。http://api.jquery.com/hide/ – garryp

@ jfriend00提供された複製は、1つのエフェクトが終了するまで待機する方法を示します。私が間違っていなければ、質問は尋ねています。 –

@MikeMcCaughan - 143のアップフォートを持つそのdupの答えは、複数のオブジェクトに対してうまくいきます。 '$（セレクタ）.promise（）。done（）'は、そのセレクタでマッチしたすべてのオブジェクトで実行されているすべてのアニメーションをキャプチャします。 – jfriend00

、あなたはjQueryのコレクションに.promise()を使用している場合、それは、コレクション内のすべての要素が彼らのアニメーションを終了したときに解決された約束を返します。したがって、各要素で.hide()のアニメーションを起動してから.promise()を実行し、その約束が解決されたらもう一方のアニメーションを実行することができます。ここで

が働いスニペット例です：アニメーションのすべてのあなたの最初のグループが同じタイミングを持っている場合はもちろん

// 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>

、あなただけ（ここで、アニメーションの連鎖jQueryのアニメーションを使用することができますあるオブジェクトが待ち行列に入り、その後のアニメーションは開始前に前のアニメーションが完了するのを待ちます）。

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

出典

2016-11-09 22:47:31 jfriend00

アニメーションチェーンとして 'items.slideUp（2000）.slideDown（2000）.promise（）。then（function（）{...}）'を使用することもできます – Bergi

@Bergi - そうですが、この質問のより一般的な部分アニメーションのグループがいつ完了するかを知る方法です（すべてが一般的なケースでは同じ持続時間を持たないかもしれません）ので、アニメーションの第2のグループを開始することができます。だから私はこれがアニメーションを連鎖させるよりも有用なことを教えてくれたと思った。私は完全性のために私の答えにアニメーション連鎖に関するいくつかの情報を追加します。 – jfriend00

関数を実行する前にjqueryエフェクトのループが終了するまで待つ方法

答えて

関連する問題