Theodore Steiner Theodore Steiner - 9 months ago 108
CSS Question

Timing Fade in Order UsingJquery

What I'm trying to do is the following:


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

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

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




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download