javascript - 如何在 jquery slideToggle 中为 slideUp 和 slideDown 指定不同的持续时间？

Question

我想要一个从浏览器顶部向下滑动的全宽面板，它将显示我的联系方式以及社交链接等:

$(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>

这很有用，但我如何指定不同的时间向上滑动和向下滑动？

Answer 1

您可以将动画持续时间存储在变量中并使用它。在 slideToggle() 的回调函数中改变持续时间。

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>