jquerytoggleClass 没有结果

Question

我有一个菜单，可以在单击时滑动切换进和出，但同时我希望菜单周围有一个灰色背景以淡入和淡出切换。我不想使用 fadeToggle 而是使用toggleClass 来完成此操作，以便能够在必要时添加更多样式。

toggleClass 根本不起作用，我不明白为什么。非常感谢您的帮助!!

$(document).ready(function(e) {
    $('#button').click(function() {
		$('#menu').slideToggle();
		$('#bgr').toggleClass('display');
	});
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
#bgr {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block; 
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

Answer 1

关键是同时使用可见性和不透明度来实现平滑的动画，并且使用#bgr.display{}在显示声明中更加具体 改为

http://jsfiddle.net/cceg9Ldp/4/

CSS

button {
    position:relative;
    z-index:2;
}

#bgr {
    opacity:0;
    visibility:hidden;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:all 1s;
    transition:all 1s;
}

 #bgr.display {
    opacity:1;
    visibility:visible;
}

HTML

<button>Click Me</button>
<div id="bgr"></div>

jQuery

$('button').click(function(){
    $('#bgr').toggleClass('display');
});