所以我有一个按钮,我想用它来显示/隐藏我的菜单 div。我考虑过切换,但由于它以 div 的显示为目标,它最终会隐藏切换菜单的按钮。我不想移动按钮。
动画在点击时效果很好,但我还没有找到上下切换动画的方法。我尝试添加 .stop() 命令,但这只会杀死整个事情......这是我目前的代码:
$('.closebutton').click(function () {
$('#settings').stop().animate({top: '-170px'});
});
$('.closebutton').click(function() {
$('#settings').stop().animate({top: '0px'});
});
HTML:
<div id="settings">
<div class="closebutton"></div>
</div>
这里我们有 CSS:
#settings {
position: absolute;
width: 100%;
height: 200px;
top: 0;
left: 0;
background: #202e3c;
z-index: 9999;
box-shadow: 0px 5px 5px rgba(0,0,0,.5)
}
.closebutton {
position: absolute;
cursor: pointer;
bottom: 5px;
right: 5px;
width: 25px;
height: 25px;
background: url(../images/gear.png);
background-size: cover;
}
最佳答案
var t = 0; // Toggler
$('.closebutton').click(function ( e ) {
t = ++t % 2; // t= 1, 0, 1, 0, 1, 0......
$('#settings').stop().animate({ top: t? -200 : 0 }); // #settings
$(e.target).stop().animate({ bottom: t? -30 : 5 }); // This button
});
没有愚蠢的切换器:
$('.closebutton').click(function ( e ) {
var p = !$('#settings').position().top; // 0 = false else true (boolean trick)
$('#settings').stop().animate({ top: p? -200 : 0 });
$(e.target).stop().animate({ bottom: p? -30 : 5 });
});
关于jquery - 单击同一按钮的动画菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17309505/