javascript - 重置事件动画 jQuery

Question

我为 Canvas 外导航创建了一个模板，它按顺序淡入列表中的每个元素。

我已将其设置为在以下情况下 Canvas 外菜单消失:

1. 点击背景
2. 点击“X”

我的问题在于我如何构建动画重置。例如，如果您激活菜单，快速关闭它，然后再次激活它，您将看到动画淡出并再次淡入。

我想要完成的是，如果用户选择其中一种方法来关闭菜单，那么基本上是硬重置代码，但我不知道如何执行中间状态重置。

有人能帮忙吗？

$(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>

Answer 1

这个弹出菜单是您需要的吗？

http://demos.jquerymobile.com/1.4.2/popup/#Menu