Вы можете использовать jQuery-методы fadeIn() и fadeOut() для отображения или скрытия HTML-элементов, постепенно увеличивая или уменьшая их непрозрачность.

<script>
$(document).ready(function(){
    // Отображение параграфов
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Затухание параграфов
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Как и другие jQuery-методы эффектов, вы можете дополнительно указать параметр продолжительности или скорости для методов fadeIn() и fadeOut(), чтобы управлять продолжительностью анимации затухания. Длительности могут быть указаны либо с использованием одной из предопределенных строк 'slow' или 'fast', либо в количестве миллисекунд; более высокие значения указывают на более медленную анимацию.

<script>
$(document).ready(function(){
    // Постепенное отображение параграфов с разной скоростью
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Постепенное затухание параграфов с разной скоростью
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

Эффект метода fadeIn()/fadeOut() похож на метод show()/hide(), но в отличие от метода show()/hide() метод fadeIn()/fadeOut() только анимирует непрозрачность целевых элементов и не анимирует их размеры.

Вы также можете указать callback-функцию обратного вызова, которая будет выполняться после завершения методов fadeIn() или fadeOut(). Мы узнаем больше о функции обратного вызова в следующих главах.

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после появления абзацев
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Код, который должен быть выполнен
            alert("The fade-out effect is completed.");
        });
    });
    
    // Отображаем предупреждающее сообщение после исчезновения в абзацах
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Код, который должен быть выполнен
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

jQuery-метод fadeToggle()

jQuery-метод fadeToggle() отображает или скрывает выбранные элементы, анимируя их непрозрачность таким образом, что, если элемент первоначально отображается, он исчезает; если же скрит, он будет появляться (то есть переключать эффект затухания).

<script>
$(document).ready(function(){
    // Переключение абзацев с исчезновением
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Точно так же вы можете указать параметр продолжительности для метода fadeToggle(), например, метод fadeIn()/fadeOut(), чтобы управлять длительностью или скоростью анимации переключения затухания.

<script>
$(document).ready(function(){
    // Эффект fadeToggle() для параграфов с разными скоростями
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

Точно так же вы можете также указать callback-функцию обратного вызова для метода fadeToggle().

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после исчезновения переключения пунктов
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Код, который должен быть выполнен
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

jQuery-метод fadeTo()

jQuery-метод fadeTo() аналогичен методу .fadeIn(), но в отличие от .fadeIn() метод fadeTo() позволяет добавлять элементы к определенному уровню непрозрачности.

$(selector).fadeTo(speed, opacity, callback);

Обязательный параметр непрозрачности указывает конечную непрозрачность целевых элементов, которая может быть числом от 0 до 1. Параметр продолжительности или скорости также требуется для этого метода, который задает продолжительность затухания анимации.

<script>
$(document).ready(function(){
    // Эффект fadeTo() к абзацам с различной непрозрачностью
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

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

Руководство по синтаксису в 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) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

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

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

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

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