我想在我的圈子的幻影和我的内容的幻影之间加上延迟。我试过"延迟"但没有任何事情发生。
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
$('.circle').toggleClass('Opacity');
$('#overlay-menu').delay(5000).toggleClass('Opacity');
$('.circle').toggleClass('open');
});
答案 0 :(得分:0)
尝试使用window.setTimeout。
window.setTimeout(function() {
$('#overlay-menu').toggleClass('Opacity');}
,1000 );
答案 1 :(得分:0)
而不是
$('#叠加菜单')延迟(5000).toggleClass。('不透明度&#39);
使用setTimeout:
setTimeout( function() {
$('#overlay-menu').toggleClass('Opacity');
}, 4000 ) <-- the amount of time to wait in milliseconds.
答案 2 :(得分:0)
使用setTimeout
来实现这一目标:
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
$('.circle').toggleClass('Opacity');
setTimeout( function() {
$('#overlay-menu').toggleClass('Opacity');
}, 5000 );
$('.circle').toggleClass('open');
});
html, body {
height: 100%;
}
body {
background: #fffdee;
}
.circle {
position: fixed;
top: -50%;
left: -50%;
height: 50%;
width: 50%;
border-radius: 50%;
background: #98694d;
opacity: 0;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.open {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#overlay-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
color: black;
opacity: 0;
z-index: 4;
}
h4.toggle-menu {
position: fixed;
top: 20px;
right: 70px;
color: black;
cursor: pointer;
z-index: 5;
}
.Opacity {
opacity: 1 !important;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
<nav id="home-menu" class="menu">
<h4 class="toggle-menu">Menu</h4>
</nav>
<div id="overlay-menu"><p>MY CONTENT</p></div>