我为 Canvas 外导航创建了一个模板,它按顺序淡入列表中的每个元素。
我已将其设置为在以下情况下 Canvas 外菜单消失:
- 点击背景
- 点击“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>
最佳答案
这个弹出菜单是您需要的吗?
关于javascript - 重置事件动画 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48156815/