點擊同一按鈕的動畫菜單

所以我有一個按鈕，我想用來顯示/隱藏我的菜單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; 
}

來源

2013-06-25 Kevin W

您可以添加HTML的適用部分？ – BjornJohnson

您的HTML對於回答這個問題是非常不可或缺的。看起來你在'＃settings'裏面有個很棒的按鈕。 –

你想完全隱藏'＃settings'面板嗎？或者讓它看起來像現在一樣？ –

LIVE DEMO

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 

});

沒有愚蠢toggler：

LIVE DEMO

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

});

來源

2013-06-26 00:59:16

完美的工作！謝謝 –

@KevinWynn不客氣 –

點擊同一按鈕的動畫菜單

回答

相關問題