如何在 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 方法即可。

你可以在文档中看到这个：

slideToggle( [duration ] [, complete ] )

duration (default: 400) Type: Number or String A string or number determining how long the animation will run.

complete Type: Function() A function to call once the animation is complete, called once per matched element.

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

#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>

您可以在官方文档中阅读更多内容here.

更新:

如果你想为 slideUp() and slideDown() 方法设置不同的持续时间，你可以这样做：

$(document).ready(function() {
  var check_state = false;
  $("#flip").click(function() {
    if (check_state === false) {
      $("#panel").stop().slideDown(3000);
      check_state = true;
    } else {
      $("#panel").stop().slideUp(1500);
      check_state = false;
    }
  });
});

#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 2

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

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

Answer 3

您可以在 jquery 文档中阅读有关 .slideToggle() 的内容正如它所说，slideToggle() 函数接受两个参数：

.slideToggle( [duration ] [, complete ] )

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

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle(5000 /* Here is the duration of the animation in MS */, function() {
        //Do what you want here
    });
  });
});

#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 4

编辑

我已编辑我的答案以反映问题的变化。

改用 slideDown() 和 slideUp()。

CODEPEN

http://codepen.io/alexincarnati/pen/PWOPjY

如果你想在 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;
      });

    }
  });
});

Answer 5

您可以将动画持续时间存储在变量中并使用它。在 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>

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

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

html

javascript

jquery

slidetoggle