How do I slow down this JQuery effect?

Question

Code:

    <script>
$(document).ready(function() {

  $('.sync_box').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.sync_box').stop().animate({height: heights });
  });
});
    </script>

Where in this script can I add time to slow it down? i am sure this is obvious but i am new to jquery/js so a bit puzzled. Please help. Thanks!

Answer 1

$('.sync_box').stop().animate({ height: heights }, TIME_IN_MS);

There buddy.

Be sure to check jquery animate api here.

Answer 2

<script>
$(document).ready(function() {

  $('.sync_box').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.sync_box').stop().animate({height: heights },2000);
  });
});
</script>

Edited example above. The 2000 is milliseconds.

Reference http://api.jquery.com/animate/