title: JavaScript one animation after another
body: <p>I have the following code. There are five columns of buttons. When any of the buttons in the first column is clicked, the second, third and fourth column will slide out. When either the second, third or fourth column is clicked, the fifth column will slide out. </p>
  
  <p>When the first column is clicked, I would like the second column to slide out first, followed by the third and then the fourth. Right now they slide out at the same time. I tried adding delays, but they do not make any difference.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("column_1").innerHTML = "";
  document.getElementById("column_1").innerHTML = "&lt;span style='color:#FFFFFF'&gt; Account Group &lt;/span&gt;";
  
  // for (var prop in cc)
  for (prop = 0; prop &lt; 10; prop++) {
    // document.getElementById('column_1').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)"&gt;' + cc[prop] + ', ' + amt[prop] + '&lt;/button&gt;&lt;/div&gt;';
    document.getElementById('column_1').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)"&gt;' + prop + '&lt;/button&gt;&lt;/div&gt;';
  }
  
  function myFunction2(e) {
    test = e;
    console.log(e);
    document.getElementById("column_2").innerHTML = "";
    document.getElementById("column_2").innerHTML = "&lt;span style='color:#FFFFFF'&gt; GL Accounts &lt;/span&gt;";
    document.getElementById("column_3").innerHTML = "";
    document.getElementById("column_3").innerHTML = "&lt;span style='color:#FFFFFF'&gt; GL Balance &lt;/span&gt;";
    document.getElementById("column_4").innerHTML = "";
    document.getElementById("column_4").innerHTML = "&lt;span style='color:#FFFFFF'&gt; GL Name &lt;/span&gt;";
    document.getElementById("column_5").innerHTML = "";
  
    // for (var prop3 in gl)
    for (prop3 = 0; prop3 &lt; 20; prop3++) {
      document.getElementById('column_2').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)"&gt;' + e + '&lt;/button&gt;&lt;/div&gt;';
      document.getElementById('column_3').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)"&gt;' + e + '&lt;/button&gt;&lt;/div&gt;';
      document.getElementById('column_4').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)"&gt;' + e + '&lt;/button&gt;&lt;/div&gt;';
  
      // document.getElementById('column_2').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)"&gt;' +  gl[prop3] + '&lt;/button&gt;&lt;/div&gt;';
      // document.getElementById('column_3').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)"&gt;' +  po[prop3] + '&lt;/button&gt;&lt;/div&gt;';
    }
  }
  
  function myFunction4(e) {
    test = e;
    console.log(e);
    document.getElementById("column_5").innerHTML = "";
    document.getElementById("column_5").innerHTML = "&lt;span style='color:#FFFFFF'&gt; Breakdown &lt;/span&gt;";
    // for (var prop5 in cc)
    for (prop5 = 0; prop5 &lt; 5; prop5++) {
      document.getElementById('column_5').innerHTML += '&lt;div class="col-md-auto"&gt; &lt;button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)"&gt;' + "Breakdown " + prop5 + '&lt;/button&gt;&lt;/div&gt;';
    }
  }
  
  function myFunction5(e) {
    test = e;
    console.log(e);
    window.open("", "", "width=500,height=500");
  }
  
  $(function() {
    // run the currently selected effect
    function runEffect1() {
      var selectedEffect = "slide";
      var options = {};
  
      // Run the effect
      $("#column_2").effect(selectedEffect, options, 500, callback);
      $("#column_3").effect(selectedEffect, options, 500, callback);
      $("#column_4").effect(selectedEffect, options, 500, callback);
  
    };
  
    function runEffect2() {
      var selectedEffect = "slide";
      var options = {};
      $("#column_5").effect(selectedEffect, options, 500, callback);
    }
  
    // Callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $("#effect").removeAttr("style").hide().fadeIn();
      }, 100);
    };
  
    // Set effect from select menu value
    $("#column_1").on("click", function() {
      runEffect1();
      return false;
    });
  
    $("#column_2").on("click", function() {
      runEffect2();
      return false;
    });
  
    $("#column_3").on("click", function() {
      runEffect2();
      return false;
    });
  
    $("#column_4").on("click", function() {
      runEffect2();
      return false;
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Roboto:300);
  .ui-effects-transfer {
    border: 2px dotted gray;
  }
  
  .login-page {
    width: 360px;
    padding: 8% 0 0;
    margin: auto;
  }
  
  .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
  
  .form input {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }
  
  .form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #4778b7;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }
  
  .form button:hover,
  .form button:active,
  .form button:focus {
    background: #4778b7;
  }
  
  .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  
  .form .message a {
    color: #4CAF50;
    text-decoration: none;
  }
  
  .form .register-form {
    display: none;
  }
  
  .container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .container:before,
  .container:after {
    content: "";
    display: block;
    clear: both;
  }
  
  .container .info {
    margin: 50px auto;
    text-align: center;
  }
  
  .container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
  }
  
  .container .info span {
    color: #4d4d4d;
    font-size: 12px;
  }
  
  .container .info span a {
    color: #000000;
    text-decoration: none;
  }
  
  .container .info span .fa {
    color: #EF3B3A;
  }
  
  body {
    background: #4778b7;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(right, #4778b7, #4778b7);
    background: -moz-linear-gradient(right, #4778b7, #4778b7);
    background: -o-linear-gradient(right, #4778b7, #4778b7);
    background: linear-gradient(to left, #4778b7, #4778b7);
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .row.no-gutter {
    margin-left: 0;
    margin-right: 0;
  }
  
  .row.no-gutter [class*='col-']:not(:first-child),
  .row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div id="grid" class="container-fluid"&gt;
    &lt;div class="row no-gutter"&gt;
      &lt;div class="col-md-2"&gt;
        &lt;div id="column_1"&gt;
          &lt;div class="list-group"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 "&gt;
        &lt;div id="column_2"&gt;
          &lt;div class="list-group"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 "&gt;
        &lt;div id="column_3"&gt;
          &lt;div class="list-group"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 "&gt;
        &lt;div id="column_4"&gt;
          &lt;div class="list-group"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;div id="column_5"&gt;
          &lt;div class="list-group"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>