我为画布外导航创建了一个模板,该模板按顺序淡入列表中的每个项目。
我已将其设置为以下情况下画布菜单消失:
我的问题在于我如何构建动画重置。例如,如果您激活菜单,快速关闭它并再次激活它,您将捕捉动画淡出并再次淡入。
我想要完成的是,如果使用选择其中一种方法来关闭菜单,那么基本上会重新设置代码,但我不知道如何执行中间状态重置。
有人可以帮忙吗?
$(document).ready(function() {
var square = $('.square');
square.click(function() {
$('.ocn').addClass('showOcn');
setTimeout(function() {
$('.ocn li').each(function(i) {
$(this).delay(100 * i).fadeIn(500);
});
}, 1000);
});
$(document).on('click', '.ocn', function() {
if( $('.ocn').hasClass('showOcn')) {
$('.ocn').removeClass('showOcn');
$('.ocn li').each(function(i) {
$(this).fadeOut();
});
};
});
});
.page {
height: 500px;
width: 900px;
border: 1px solid;
}
.square {
height: 50px;
width: 50px;
border: 1px solid;
}
.ocn {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: rgba(0,0,0, .9);
opacity: 0;
transition: all .3s ease;
}
ul > li {
color: white;
display: none;
}
.showOcn {
z-index: 2;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="square"></div>
</div>
<div class="ocn">
<ul class="myNav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
<li>Three</li>
</ul>
</div>