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>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.