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ブロックの一部をネストし、されていないため、ボタンは同じ位置に留まります。私はあなたがこのような何かをしたい推測している

：

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

と私はスタイルを#openするtransition: top 0.5s ease-out;を追加しました： https://fiddle.jshell.net/4fs5x0p4/1/

このスクリプトです。 トランジションとアニメーションの時間を好みに合わせて微調整します。