Timing Fade in Order UsingJquery

Question

What I'm trying to do is the following:

When the user clicks a trigger, an overlay comes on the screen (this is working)

after the overlay fades in, I want to be able to control the delay time before the list items of a UL fade in

Once the list items complete their fade in, I want to trigger two other elements to fade in on the page

Right now I've just got it to the point where the

list-items

fadeIn, but I don't know how to control the time prior to their fade in.

Can anyone help?

$(document).ready(function() {

  var square = $('.square');

  var ocn = $('.off-canvas-nav');

  var flag = false;



  square.click(function() {

    ocn.addClass('showOCN');

    flag = true;

    $(".mainNav li").each(function(i) {

      $(this).delay(300 * i).fadeIn(1000);

    });

  });

});

* {

  padding: 0;

  margin: 0;

}



.container {

  height: 100%;

  width: 100%;

  position: relative;

}



.page {

  border: 1px solid;

  width: 90%;

  height: 90%;

  min-height: 500px;

}



.square {

  height: 40px;

  width: 40px;

  position: relative;

  left: 50px;

  top: 10px;

  background-color: #444;

  cursor: pointer;

}



.off-canvas-nav {

  position: absolute;

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .6);

  top: 0;

  left: 0;

  opacity: 0;

  z-index: -1;

  transition: all .3s ease;

}



.showOCN {

  opacity: 1;

  z-index: 2;

}



.mainNav {

  list-style-type: none;

  left: 20%;

  top: 50px;

  position: relative;

}



.mainNav>li {

  margin: 30px 0px;

  display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="page">

    <div class="square"></div>

  </div>

  <div class="off-canvas-nav">

    <ul class="mainNav">

      <li class=".fadeMe">Items</li>

      <li class=".fadeMe">Items</li>

      <li class=".fadeMe">Items</li>

      <li class=".fadeMe">Items</li>

      <li class=".fadeMe">Items</li>

    </ul>

  </div>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You could use setTimeout() to trigger the fadeIn :

setTimeout(function(){
  $(".mainNav li").each(function(i) {
    $(this).delay(300 * i).fadeIn(1000);
  });
}, 2000); //After 2 seconds

Hope this helps.

$(document).ready(function() {
  var square = $('.square');
  var ocn = $('.off-canvas-nav');
  var flag = false;

  square.click(function() {
    ocn.addClass('showOCN');
    flag = true;
    setTimeout(function() {
      $(".mainNav li").each(function(i) {
        $(this).delay(300 * i).fadeIn(1000);
      });
    }, 2000); //After 2 seconds
  });
});

* {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
}

.page {
  border: 1px solid;
  width: 90%;
  height: 90%;
  min-height: 500px;
}

.square {
  height: 40px;
  width: 40px;
  position: relative;
  left: 50px;
  top: 10px;
  background-color: #444;
  cursor: pointer;
}

.off-canvas-nav {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all .3s ease;
}

.showOCN {
  opacity: 1;
  z-index: 2;
}

.mainNav {
  list-style-type: none;
  left: 20%;
  top: 50px;
  position: relative;
}

.mainNav>li {
  margin: 30px 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="page">
    <div class="square"></div>
  </div>
  <div class="off-canvas-nav">
    <ul class="mainNav">
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
      <li class=".fadeMe">Items</li>
    </ul>
  </div>
</div>

Timing Fade in Order UsingJquery

Sign up