Как указать различную продолжительность для slideUp и slideDown в jquery slideToggle?

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>

Answer 2

РЕДАКТИРОВАТЬ

Я изменил свой ответ, чтобы отразить изменение в вопросе.

Вместо этого используйте 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 3

Просто добавьте время в качестве параметра к slideToggle метод.

Вы можете увидеть в документах это:

slideToggle ([ продолжительность ] [, завершено ])

duration (по умолчанию: 400) Тип: Number или String Строка или число, определяющие, как долго будет выполняться анимация.

complete Тип: Function() Функция, которая вызывается после завершения анимации, вызывается один раз для соответствующего элемента.

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

Вы можете прочитать больше в официальной документации здесь.

ОБНОВЛЕНИЕ:

Если вы хотите иметь разные длительности для методов slideUp() и 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 4

Вы можете прочитать о .slideToggle() в документации по jquery. slideToggle() Функция принимает два параметра:

.slideToggle ([продолжительность] [, завершено])

Первый - для длительности (в миллисекундах), а второй - для обратного вызова после завершения анимации.

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

Вы можете указать время в первом параметре функции slideToggle:

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