1

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.

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.

document.getElementById("column_1").innerHTML = "";
document.getElementById("column_1").innerHTML = "<span style='color:#FFFFFF'> Account Group </span>";

// for (var prop in cc)
for (prop = 0; prop < 10; prop++) {
  // document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + cc[prop] + ', ' + amt[prop] + '</button></div>';
  document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>';
}

function myFunction2(e) {
  test = e;
  console.log(e);
  document.getElementById("column_2").innerHTML = "";
  document.getElementById("column_2").innerHTML = "<span style='color:#FFFFFF'> GL Accounts </span>";
  document.getElementById("column_3").innerHTML = "";
  document.getElementById("column_3").innerHTML = "<span style='color:#FFFFFF'> GL Balance </span>";
  document.getElementById("column_4").innerHTML = "";
  document.getElementById("column_4").innerHTML = "<span style='color:#FFFFFF'> GL Name </span>";
  document.getElementById("column_5").innerHTML = "";

  // for (var prop3 in gl)
  for (prop3 = 0; prop3 < 20; prop3++) {
    document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
    document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
    document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';

    // document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">' +  gl[prop3] + '</button></div>';
    // document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">' +  po[prop3] + '</button></div>';
  }
}

function myFunction4(e) {
  test = e;
  console.log(e);
  document.getElementById("column_5").innerHTML = "";
  document.getElementById("column_5").innerHTML = "<span style='color:#FFFFFF'> Breakdown </span>";
  // for (var prop5 in cc)
  for (prop5 = 0; prop5 < 5; prop5++) {
    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)">' + "Breakdown " + prop5 + '</button></div>';
  }
}

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;
  });
});
@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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-2">
      <div id="column_1">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_2">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_3">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_4">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2">
      <div id="column_5">
        <div class="list-group"></div>
      </div>
    </div>
  </div>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Subhaac
  • 437
  • 12
  • 26
  • you could either use the callback functions from effect to trigger the next animation or use queue to put all the animations in the same queue and add delays – LordNeo Oct 18 '17 at 12:43
  • Possible duplicate of [How can I animate multiple elements sequentially using jQuery?](https://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery) – LordNeo Oct 18 '17 at 12:44
  • Not sure if you saw my answer, but the snippet is now working fully! (you need to view it in expanded mode to see it) – FluffyKitten Oct 18 '17 at 13:21

3 Answers3

0

you can do something like this:

function runEffect1() {
                var selectedEffect = "slide";
                var options = {};

                // Run the effect
                setTimeout(function () {
                    $("#column_2").effect(selectedEffect);
                }, 100);
                setTimeout(function () {

                    $("#column_3").effect(selectedEffect);
                }, 300);
                setTimeout(function () {
                    $("#column_4").effect(selectedEffect);
                }, 500);

            };
Nofar Eliasi
  • 109
  • 5
0

Instead of trying to set up timeouts to match the speed, you can chain them using callbacks, like this:

$("#column_2").effect(selectedEffect, options, 500, function(){
    $("#column_3").effect(selectedEffect, options, 500, function(){ 
        $("#column_4").effect(selectedEffect, options, 500, callback);
    });
});

What's happening is that the inline callback function won't start running until the current effect finishes.


Working Example: 

document.getElementById("column_1").innerHTML = "";
document.getElementById("column_1").innerHTML = "<span style='color:#FFFFFF'> Account Group </span>";

// for (var prop in cc)
for (prop = 0; prop < 10; prop++) {
  // document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + cc[prop] + ', ' + amt[prop] + '</button></div>';
  document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>';
}

function myFunction2(e) {
  test = e;
  console.log(e);
  document.getElementById("column_2").innerHTML = "";
  document.getElementById("column_2").innerHTML = "<span style='color:#FFFFFF'> GL Accounts </span>";
  document.getElementById("column_3").innerHTML = "";
  document.getElementById("column_3").innerHTML = "<span style='color:#FFFFFF'> GL Balance </span>";
  document.getElementById("column_4").innerHTML = "";
  document.getElementById("column_4").innerHTML = "<span style='color:#FFFFFF'> GL Name </span>";
  document.getElementById("column_5").innerHTML = "";

  // for (var prop3 in gl)
  for (prop3 = 0; prop3 < 20; prop3++) {
    document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
    document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
    document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';

    // document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">' +  gl[prop3] + '</button></div>';
    // document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + '  class="list-group-item" onclick="myFunction4(this.id)">' +  po[prop3] + '</button></div>';
  }
}

function myFunction4(e) {
  test = e;
  console.log(e);
  document.getElementById("column_5").innerHTML = "";
  document.getElementById("column_5").innerHTML = "<span style='color:#FFFFFF'> Breakdown </span>";
  // for (var prop5 in cc)
  for (prop5 = 0; prop5 < 5; prop5++) {
    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)">' + "Breakdown " + prop5 + '</button></div>';
  }
}

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 = {};
    
    /* Hide the columns so that they can slide into display*/
    $("#column_2").hide();
    $("#column_3").hide();
    $("#column_4").hide();
    
    // Run the effect
    $("#column_2").effect(selectedEffect, options, 500, function(){
        $("#column_3").effect(selectedEffect, options, 500, function(){ 
            $("#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;
  });

});
@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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-2">
      <div id="column_1">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_2">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_3">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2 ">
      <div id="column_4">
        <div class="list-group"></div>
      </div>
    </div>
    <div class="col-md-2">
      <div id="column_5">
        <div class="list-group"></div>
      </div>
    </div>
  </div>
</div>

Alternative:

If nesting them gets too deep to manage, you can put each into a separate function like this:

function showCol2(){ $("#column_2").effect(selectedEffect, options, 500, showCol3); }
function showCol3(){ $("#column_3").effect(selectedEffect, options, 500, showCol4); }
function showCol4(){ $("#column_4").effect(selectedEffect, options, 500, callback); }
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
0

I am having problems changing your code, but jQuery has this sample code:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

nest your calls in animation complete section and it should work. Also you can use jQuery promise().

var p1 = $('.items').hide(2000).promise();
var p2 = $('.items').hide(2000).promise();
$.when(p1).then(function() {
     $.when(p2).then(function() {
    // more animations ...
     });
});
Paun Narcis Iulian
  • 779
  • 7
  • 15