How to specify different duration for slideUp and slideDown in jquery slideToggle?

Question

I want a full width panel to slide down from the top of the browser, that will display my contact details, along with social links etc:

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle();
  });
});

#flip {
  padding: 5px;
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
  width: 100%;
  height: 200px;
  z-index: 5000;
  background-color: black;
}
.f {
  position: static;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

This works a treat, but how can I specify different times for slide up and slidedown?

Answer 1

You can store duration of animation in variable and use it. In function of callback of slideToggle() change duration.

var duration = 500;
$("#flip").click(function() {
  $("#panel").slideToggle(duration, function(){
    duration = $(this).is(":visible") ? 2000 : 500;
  });
});

var duration = 500;
$("#flip").click(function() {
  $("#panel").slideToggle(duration, function(){
    duration = $(this).is(":visible") ? 2000 : 500;
  });
});

#flip {
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  display: none;
  width: 100%;
  height: 150px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>