jivo banner 468x60jivo banner 728x90jivo banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Руководство по методам slideUp() и slideDown() в jQuery

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>
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

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

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

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

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

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее