What I'm trying to do is the following:
list-items
$(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>
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>