JS CSS切換按鈕不會向上移動

Question

問題是，我的打開按鈕並不想在隱藏後進入最前面。它仍然處於相同的位置！ https://fiddle.jshell.net/4fs5x0p4/

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
    $("#open").toggle(
     function() { 
      $('#navibar').animate({height: "-50px"}); 
     }, 
     function() { 
     $('#navibar').animate({height: "50px"}); 
     } 
    ); 

    });//]]> 

    </script> 
    <div id="navibar"> 
     <nav> 
      <ul> 
       <li><a href="#">WordPress</a> 
        <ul> 
         <li><a href="#">Themes</a></li> 
         <li><a href="#">Plugins</a></li> 
         <li><a href="#">Tutorials</a></li> 
        </ul>   
       </li> 
      </ul> 
     </nav> 
    </div> 
    <div id="open"></div> 

Answer 1

的按鈕保持在相同的位置，因爲它沒有嵌套在navibar塊/部分和，因爲它的位置是絕對的。

我猜你想是這樣的： https://fiddle.jshell.net/4fs5x0p4/1/

這是腳本：

$(function() { 
    $("#open").toggle(
    function() { 
     $('#navibar').animate({ 
     height: "-50px" 
     }, 800); 
     $(this).css("top", "0px"); 
    }, 
    function() { 
     $('#navibar').animate({ 
     height: "50px" 
     }, 500); 
     $(this).css("top", "30px"); 
    } 
); 
}); 

和我說transition: top 0.5s ease-out;到#open風格。 根據自己的喜好微調轉場和動畫時間。