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

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

$document.readyfunction{ $flip.clickfunction{ $panel.slideToggle； }; }; 翻转{ 填充物：5px； 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 填充：50px； 显示：无； 宽度：100%； 高度：200px； z指数：5000； 背景色：黑色； } f{ 位置：静态； } 你好，世界！ 菜单

---

只需将时间作为参数添加到slideToggle方法中即可

您可以在文档中看到：

滑动切换[持续时间][完成]

持续时间默认值：400 类型：数字或字符串 确定动画将运行多长时间的字符串或数字

完整的 类型：功能 动画完成后要调用的函数，每个匹配元素调用一次

$document.readyfunction{ $flip.clickfunction{ $panel.slideToggle3000； }; }; 翻转{ 填充物：5px； 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 填充：50px； 显示：无； 宽度：100%； 高度：200px； z指数：5000； 背景色：黑色； } f{ 位置：静态； } 你好，世界！ 菜单

---

只需将时间作为参数添加到slideToggle方法中即可

您可以在文档中看到：

滑动切换[持续时间][完成]

持续时间默认值：400 类型：数字或字符串 确定动画将运行多长时间的字符串或数字

完整的 类型：功能 动画完成后要调用的函数，每个匹配元素调用一次

$document.readyfunction{ $flip.clickfunction{ $panel.slideToggle3000； }; }; 翻转{ 填充物：5px； 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 填充：50px； 显示：无； 宽度：100%； 高度：200px； z指数：5000； 背景色：黑色； } f{ 位置：静态； } 你好，世界！ 菜单

---

您可以在函数slideToggle的第一个参数中指定时间：

$("#panel").slideToggle(4000);

---

您可以在函数slideToggle的第一个参数中指定时间：

$("#panel").slideToggle(4000);

您可以阅读jquery文档中的 正如它所说，slideToggle函数接受两个参数：

.slideToggle[持续时间][完成]

第一个是以毫秒为单位的持续时间，第二个是动画完成后的回调

$document.readyfunction{ $flip.clickfunction{ $panel.slideToggle5000/*这是动画的持续时间，单位为MS*/，函数{ //你想在这里干什么就干什么 }; }; }; 翻转{ 填充物：5px； 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 填充：50px； 显示：无； 宽度：100%； 高度：200px； z指数：5000； 背景色：黑色； } f{ 位置：静态； } 你好，世界！ 菜单 您可以阅读jquery文档中的 正如它所说，slideToggle函数接受两个参数：

.slideToggle[持续时间][完成]

第一个是以毫秒为单位的持续时间，第二个是动画完成后的回调

$document.readyfunction{ $flip.clickfunction{ $panel.slideToggle5000/*这是动画的持续时间，单位为MS*/，函数{ //你想在这里干什么就干什么 }; }; }; 翻转{ 填充物：5px； 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 填充：50px； 显示：无； 宽度：100%； 高度：200px； z指数：5000； 背景色：黑色； } f{ 位置：静态； } 你好，世界！ 菜单 编辑

我已经编辑了我的答案，以反映问题中的变化

改用slideDown和slideUp

代码笔

如果您想为jQuery中的上下滑动添加不同的持续时间，那么您只需添加一个标志并检查菜单是否打开，然后使用slideDown和slideUp作为方法。 这样，您可以为幻灯片添加不同的持续时间

$(document).ready(function() {
  var menuOpened = false;

  $("#flip").click(function() {

    if (menuOpened === false) {
      $("#panel").slideDown(1000, function() {
        menuOpened = true;
      });

    } else {
      $("#panel").slideUp(700, function() {
        menuOpened = false;
      });

    }
  });
});

编辑

我已经编辑了我的答案，以反映问题中的变化

改用slideDown和slideUp

代码笔

如果您想为jQuery中的上下滑动添加不同的持续时间，那么您只需添加一个标志并检查菜单是否打开，然后使用slideDown和slideUp作为方法。 这样，您可以为幻灯片添加不同的持续时间

$(document).ready(function() {
  var menuOpened = false;

  $("#flip").click(function() {

    if (menuOpened === false) {
      $("#panel").slideDown(1000, function() {
        menuOpened = true;
      });

    } else {
      $("#panel").slideUp(700, function() {
        menuOpened = false;
      });

    }
  });
});

---

可以将动画的持续时间存储在变量中并使用它。在滑块切换更改持续时间的回调函数中

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

var持续时间=500； $flip.clickfunction{ $panel.slideToggleduration，函数{ 持续时间=$this.is:visible？2000:500； }; }; 翻转{ 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 显示：无； 宽度：100%； 高度：150像素； 背景色：黑色； } 你好，世界！ 菜单

---

可以将动画的持续时间存储在变量中并使用它。在滑块切换更改持续时间的回调函数中

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

var持续时间=500； $flip.clickfunction{ $panel.slideToggleduration，函数{ 持续时间=$this.is:visible？2000:500； }; }; 翻转{ 宽度：300px； 文本对齐：居中； 背景色：e5eecc； 边框：实心1pxC3C3； } 面板{ 显示：无； 宽度：100%； 高度：150像素； 背景色：黑色； } 你好，世界！ 菜单

---

RTD：它实际上是第一个参数。它非常清楚地位于。。。祝你好运对于那些愿意发布此问题答案的人来说，容易获得的分数！我打赌会有负载…但我如何指定不同的上下滑动时间@Rorymcrossan在这种情况下，您需要确定元素的当前状态，并分别调用slideUp和slideDown，提供不同的持续时间。@Rorymcrossan谢谢。所以，滑动切换，如果你愿意，只允许一个速度参数？RTD：它实际上是第一个参数。它非常清楚。。。祝你好运对于那些愿意发布此问题答案的人来说，容易获得的分数！我打赌会有负载…但我如何指定不同的上下滑动时间@Rorymcrossan在这种情况下，您需要确定元素的当前状态，并分别调用slideUp和slideDown，提供不同的持续时间。@Rorymcrossan谢谢。所以，如果您愿意，滑动切换只允许一个速度参数？非常感谢！但是，如何指定不同的向上滑动时间和向下滑动时间？在这种情况下，您不能使用slideToggle，您需要分别使用slideUp和slideDown。@Davv，我还使用了使用这些方法的示例更新了我的答案。现在您可以设置不同的时间。非常感谢！但是，如何指定不同的向上滑动时间和向下滑动时间？在这种情况下，您不能使用slideToggle，您需要分别使用slideUp和slideDown。@Davv，我还使用了使用这些方法的示例更新了我的答案。现在您可以设置不同的时间。