我想要做的是以下几点:
1. 当用户点击触发器时,屏幕上会出现一个覆盖层(这个已经实现了); 2. 覆盖层淡入后,我希望能够控制 UL 列表项淡入之前的延迟时间; 3. 一旦列表项完成淡入,我希望触发页面上另外两个元素的淡入效果。
目前,我只能让列表项淡入,但不知道如何控制它们淡入之前的时间。请问有人可以帮忙吗?
1. 当用户点击触发器时,屏幕上会出现一个覆盖层(这个已经实现了); 2. 覆盖层淡入后,我希望能够控制 UL 列表项淡入之前的延迟时间; 3. 一旦列表项完成淡入,我希望触发页面上另外两个元素的淡入效果。
目前,我只能让列表项淡入,但不知道如何控制它们淡入之前的时间。请问有人可以帮忙吗?
$(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>