在jquery中添加延迟

Question

我想在我的圈子的幻影和我的内容的幻影之间添加延迟。我尝试了“延迟”，但没有发生。

MY JSFIDDLE

$('.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'); 

}); 

Answer 1

尝试使用window.setTimeout。 。

window.setTimeout(function() { 
        $('#overlay-menu').toggleClass('Opacity');} 

       ,1000); 

Answer 2

而不是

$（ '＃叠加菜单'）延迟（5000）.toggleClass（ '透明度'）;

使用的setTimeout：

setTimeout(function() { 
    $('#overlay-menu').toggleClass('Opacity'); 
}, 4000) <-- the amount of time to wait in milliseconds. 

Answer 3

使用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>