jQuery - скрыть div, а затем показать по щелчку

Question

Итак, у меня есть div, который я хочу спуститься вниз из-за другого div при нажатии стрелки - затем снова скрыть, как только нажата кнопка формы. Я могу кодировать большинство из этого, однако я не понимаю, как скрыть div от представления, а затем сделать его раскрывающимся, используя slideToggle.

Редактировать: Как предложено людьми ниже (спасибо), оказывается, что slideToggle() не то, что мне нужно, а скорее animate() - код ниже не работает, я добавил ссылку к пользовательскому интерфейсу jQuery, но все равно ничего.

HTML

<div class="schedule"> 
     <div class="scheduletop"> 
      <a href="/"><img src="/images/audit.png"></a> 
     </div><!-- .scheduletop --> 
     <div class="schedulebottom"> 
      <?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?> 
     </div><!-- .schedulebutton --> 
     <div class="thestuff"> 
      <h3>TEST!</h3> 
     <div class="slide"> 
      CLICK TEST TO SLIDE 
     </div><!-- .slide --> 
     </div><!-- .thestuff --> 
    </div><!-- .schedule --> 

JQuery

$(document).ready(function() { 
$(".slide").click(function() { 
     $(".thestuff").animate({"down": "150px"}, "slow"); 
    }); 
}); 

Любые идеи?

Answer 1

slideToggle() не является функцией, которую вы должны использовать в этой ситуации. Он только изменяет высоту согласованных элементов, в то время как метод .animate(), с другой стороны, может перемещать ваш div в нужном направлении, но он не скрывает элемент, когда анимация закончена, поэтому вы должны использовать обратный вызов, если хотите для достижения этого. Если вы хотите разместить div за другим, вы должны использовать свойство css z-index.

Answer 2

Как вам сказали, вы должны использовать .animate().
Я сделал простой пример here.
здесь код JS

$(document).ready(function() { 
    $(".thestuff").click(function() { 
     $el = $(this).find(".slide"); 
     if (!$el.data('up')) { 
      var h3Margin = parseInt($(this).children().eq(0).height(), 10); 
      var margin = "-" + ($el.height() + h3Margin) + "px"; 
      $el.css("z-index", -10); 
      $el.animate({ 
       "margin-top": margin 
      }); 
      $el.data('up', true); 
     } else { 
      $el.animate({ 
       "margin-top": 0 
      }, { 
       complete: function() { 
        $el.css("z-index", 1); 
       } 
      }); 

      $el.data('up', false); 
     } 
    }); 
}); 

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

Answer 3

$(".slide").animate(
     { top: "+=150" }, 
     1000, 
     function() { 
      $(this).hide(); 
     } 
    ); 

Приведенный выше код будет анимировать DIV вниз 150px за счет увеличения «верх ". Затем, когда закончится анимация, он скроет ваш .slide div.

Редактировать: «1000» там говорит, занять 1 секунду, чтобы завершить анимацию.

edit2: О, также убедитесь, что .slide имеет атрибут «позиция», установленный в «relative».

Answer 4

Хорошо, мне кажется, что я могу добиться того, что я ищу с помощью функции slideToggle() afterall, мне просто нужно было установить основной контейнер содержимого, чтобы он не показывался до щелчка (добавлено отображение: none, в CSS).

$(document).ready(function() { 
$(".slide").click(function() { 
    $(".thestuff").slideToggle("slow"); 
    }); 
}); 

Для тех, кто может быть пытается найти аналогичные решения проверить jsfiddle