jQuery-методы slideUp() и slideDown() используются для скрытия или отображения HTML-элементов путем постепенного уменьшения или увеличения их высоты (т.е. путем их перемещения вверх или вниз).
<script>
$(document).ready(function(){
// Появление абзацев
$(".up-btn").click(function(){
$("p").slideUp();
});
// Исчезновение абзацев
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Как и другие методы эффектов jQuery, вы можете дополнительно указать параметр продолжительности анимации для методов slideUp() и slideDown(). Длительности могут быть указаны либо с использованием одной из предопределенных строк 'slow' или 'fast', либо в количестве миллисекунд; чем больше указаное значение, тем медленнее анимация.
<script>
$(document).ready(function(){
// Появление абзацев с разными скоростями
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Исчезновение абзацев с разными скоростями
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Вы также можете указать callback-функцию обратного вызова, которая будет выполняться после завершения метода slideUp() или slideDown(). Мы узнаем больше о функции обратного вызова в следующих главах.
<script>
$(document).ready(function(){
// Отображаем предупреждающее сообщение после появления абзацев
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Код, который должен быть выполнен
alert("The slide-up effect is completed.");
});
});
// Отображаем предупреждающее сообщение после исчезновения абзацев
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Код, который должен быть выполнен
alert("The slide-down effect is completed.");
});
});
});
</script>jQuery-метод slideToggle()
jQuery-метод slideToggle() отображает или скрывает выбранные элементы, анимируя их высоту таким образом, что если элемент первоначально отображается, он будет перемещаться вверх; если он скрыт, он будет скользить вниз, т.е. переключаться между методами slideUp() и slideDown().
<script>
$(document).ready(function(){
// Переключатель отображения абзацев со скольжением
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Аналогично, вы можете указать параметр продолжительности для метода slideToggle(), например, методы slideUp() и slideDown() для управления скоростью анимации переключения слайдов.
<script>
$(document).ready(function(){
// Переключаем отображение абзацев с разными скоростями
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Точно так же вы можете указать callback-функцию обратного вызова для метода slideToggle().
<script>
$(document).ready(function(){
// Отображаем предупреждающее сообщение после смены слайдов
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Код, который должен быть выполнен
alert("The slide-toggle effect is completed.");
});
});
});
</script>
