Меню jQuery действует странно

Question

при щелчке, div должен двигаться вверх и быть в основном скрытым, а затем снова щелкнуть, вернуться в исходное положение. Да ... это так не получается. Я использовал анимацию для перемещения div + 100px, а затем -100px, но она не движется вверх и с экрана, чтобы скрываться. Вместо этого он перемещается DOWN, а затем начинает (я думаю) работать.

http://jsfiddle.net/laurelrose18/LLdjh/7/

#panel { 

} 

.menu { 
    -webkit-border-bottom-left-radius:38px; 
    -webkit-border-bottom-right-radius:38ßpx; 
    border-bottom-left-radius:38px; 
    border-bottom-right-radius:38px; 
    background: $bluejeans; 
    width: 100px; 
    height:300px; 
    padding-bottom: 25px; 
} 


.menu li { 

    margin-bottom: .5em; 
    list-style-type: none; 

} 



#menubtn { 
    width: 100px; 
    height: auto; 
    max-width: 100px; 
    margin-top: -100px; 
} 




.active { 
padding-top: 100px; 
} 



<div class="container"> 
     <div class="row slidemenu"> 
      <div class="span2 offset10"> 

       <div id="panel"> 
       <ul class="menu flexbox"> 
       <li class="smIcon">sk</li> 
       <li class="smIcon">pr</li> 
       <li class="smIcon">tk</li> 
       <li class="hitext">menu</li> 
       </ul> 
      </div> 

      <div id="menulogo"> 
       <a class="slidebtn" href="#"><img src="images/monogram.png" alt="menu button" id="menubtn"></a> 
       </div> 

      </div> 
      </div> 
     </div> 

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

    $(".slidebtn").click(function(){ 
     $("#panel").toggleClass("active"); 
     $("#panel").slideToggle("slow"); 
     return false; 
    }); 


}); 
</script> 

Answer 1

я заменил $(this).position().top + 200 с предпочтительным способом +=200px для .animate(). Fiddle: http://jsfiddle.net/LLdjh/10/

С #panel начинается с top: 0px, вместо этого вы можете использовать статические значения для .animate().
Fiddle: http://jsfiddle.net/LLdjh/11/
JQuery:

$(function() { 
    var gomenu = "open" 
    $(".slidebtn").click(function() { 
     if (gomenu == "open") { 
      $("#panel").stop().animate({ 
       top: "200px" 
      }, 500); 
      gomenu = "close"; 
     } else if (gomenu == "close") { 
      $("#panel").stop().animate({ 
       top: "0px" 
      }, 500); 
      gomenu = "open"; 
     } 
    }); 
});