JQuery Кнопка переключения

Question

Я новичок в JQuery, поэтому, пожалуйста, медведь со мной =)

У меня есть кнопка «Меню», которое должно «скользить вниз» меню.

Моя проблема заключается в том, что меню видно с самого начала, я хочу, чтобы он был спрятан вначале, а затем при нажатии на кнопку «Меню», если меню «скользит вниз», а затем «ускоряется» снова после снова нажмите кнопку «Меню».

Мой HTML:

<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div> 
<div id="effect">Some Content</div> 

Мой JS код:

<script type="text/javascript"> 

    $(function() { 
     function runEffect(){ 
      var selectedEffect = $('#slide').val(); 
      var options = {}; 
      if(selectedEffect == 'scale'){ options = {percent: 0}; } 
      else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } 
      $("#effect").toggle(selectedEffect,options,500); 
     }; 

     $("#moduleMenuBtn").click(function() { 
      runEffect(); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

Вы можете просто добавить некоторые CSS, чтобы скрыть его изначально, как это:

​#effect { display: none; }​ 

Или рядный, как это:

<div id="effect" style="display: none;">Some Content</div> 

Answer 2

Просто используйте display:none; или visibility:hidden; на элементе #slide в css. Или положите $('#slide').hide(); в начало javascript.

Также, если вы хотите скользить вверх/вниз, jQuery имеет собственные функции slideUp(), slideDown() и slideToggle(). См. jQuery documentation.